Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use fetch instead of apiFetch. #9936

Merged
merged 10 commits into from
Jan 6, 2025
Merged

Use fetch instead of apiFetch. #9936

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
14e9cba
Use fetch instead of apiFetch.
ankitrox Dec 23, 2024
a646fb4
Use URL to construct.
ankitrox Dec 23, 2024
de0575c
Remove unused fetchMock use.
aaemnnosttv Dec 23, 2024
5c8adab
Merge branch 'develop' into infrastructure/9485-periodic-connection-c…
ankitrox Jan 2, 2025
7e43cfb
Merge branch 'infrastructure/9485-periodic-connection-check' of githu…
ankitrox Jan 2, 2025
e89a846
Set offline only when error code is fetch_error.
ankitrox Jan 2, 2025
64c2d6a
Add test for fetch_error scenario.
ankitrox Jan 2, 2025
d3e9cbf
Merge branch 'develop' into infrastructure/9485-periodic-connection-c…
aaemnnosttv Jan 3, 2025
f555373
Simplify internet connection check.
aaemnnosttv Jan 3, 2025
3cded87
Merge branch 'develop' into infrastructure/9485-periodic-connection-c…
aaemnnosttv Jan 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 4 additions & 9 deletions assets/js/hooks/useMonitorInternetConnection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ import { useLifecycles, useInterval } from 'react-use';
/**
* WordPress dependencies
*/
import apiFetch from '@wordpress/api-fetch';
import { useCallback } from '@wordpress/element';

/**
Expand All @@ -33,6 +32,8 @@ import { useCallback } from '@wordpress/element';
import { useSelect, useDispatch } from 'googlesitekit-data';
import { CORE_UI } from '../googlesitekit/datastore/ui/constants';

const { rootURL } = global._googlesitekitAPIFetchData || {};

/**
* Monitors the user's internet connection status.
*
Expand All @@ -53,15 +54,9 @@ export function useMonitorInternetConnection() {
}

try {
const connectionCheckResponse = await apiFetch( {
path: '/google-site-kit/v1/',
} );

// We are only interested if the request was successful, to
// confirm online status.
const canReachConnectionCheck = !! connectionCheckResponse;
await fetch( new URL( '/google-site-kit/v1/', rootURL ) );
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After some more thought here, I think this is not quite the right solution (criticizing my own IB here! 😄).

The fact that we're reaching for some internal api-fetch data here is a smell that we should be using that instead. The reason I suggested using fetch instead was to avoid the additional cases where api-fetch throws, where fetch only throws when the request fails. Essentially we should be able to do the same using api-fetch with an additional check in the throw block as api-fetch returns a specific error in this case. See https://github.com/WordPress/gutenberg/blob/d9b726b8451746703cc1b9680487e3726ab4a03f/packages/api-fetch/src/index.js#L130-L131

In summary, we can keep most of what we had before, but adjusted to use an approach closer to the suggested one here in letting the try/catch determine the result. The difference in using api-fetch is that we need to set the online state conditionally depending on the error code if it throws. I.e. if it throws and the error code is fetch_error, only then should we set it to be offline. Any other error would mean the request happened, which is all we are concerned about here, and can be ignored.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @aaemnnosttv , I've made the changes according to the suggestion.


setIsOnline( canReachConnectionCheck );
setIsOnline( true );
} catch ( err ) {
setIsOnline( false );
}
Expand Down
8 changes: 3 additions & 5 deletions assets/js/hooks/useMonitorInternetConnection.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ import {
import { CORE_UI } from '../googlesitekit/datastore/ui/constants';
import { useMonitorInternetConnection } from './useMonitorInternetConnection';

const { rootURL } = global._googlesitekitAPIFetchData || {};

describe( 'useMonitorInternetConnection', () => {
let registry;
let store;
Expand All @@ -40,7 +42,7 @@ describe( 'useMonitorInternetConnection', () => {
} );
};

const connectionCheckEndpoint = '/google-site-kit/v1/?_locale=user';
const connectionCheckEndpoint = new URL( '/google-site-kit/v1/', rootURL );

const connectionCheckResponse = {
namespace: 'google-site-kit/v1',
Expand Down Expand Up @@ -68,10 +70,6 @@ describe( 'useMonitorInternetConnection', () => {
} );

it( 'should set online status correctly', () => {
fetchMock.getOnce( connectionCheckEndpoint, {
body: connectionCheckResponse,
} );

renderHook( () => useMonitorInternetConnection(), { registry } );

expect( store.getState().isOnline ).toBe( true );
Expand Down
Loading