-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(core): default global fetchPolicy and ssrForceFetchDelay (#60)
- Loading branch information
Showing
13 changed files
with
451 additions
and
57 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| --- | ||
| id: create-data-client | ||
| title: createDataClient() | ||
| sidebar_label: createDataClient() | ||
| description: 'Various configurations you can pass to createDataClient()' | ||
| --- | ||
|
|
||
| ## `createDataClient` | ||
| Params: | ||
| * `options: createDataClientOptions` | ||
|
|
||
| ```ts | ||
| interface createDataClientOptions { | ||
| ssr?: boolean; | ||
| ssrForceFetchDelay?: number; | ||
| fetchPolicy?: 'cache-first' | 'cache-and-network' | 'network-only'; | ||
| test?: boolean; | ||
| initialCache?: Record<string, any>; | ||
| headers?: Record<string, string>; | ||
| } | ||
| ``` | ||
|
|
||
| Example usage: | ||
| ```javascript | ||
| import { createDataClient } from 'react-isomorphic-data'; | ||
|
|
||
| const client = createDataClient({ | ||
| ssr: false, | ||
| }); | ||
| ``` | ||
|
|
||
| ### Configurations | ||
| Following is a list of all the fields possible to be configured in the `createDataClientOptions` object | ||
|
|
||
| #### `ssr` | ||
| * Type: `boolean` | ||
| * Default: `false` | ||
|
|
||
| Determines whether the `dataClient` instance will run on server-side or not. | ||
|
|
||
| #### `ssrForceFetchDelay` | ||
| * Type: `number` | ||
| * Default: `0` | ||
|
|
||
| Determines how many milliseconds the `dataClient` should prevent client-side refetching on hook/HOC using `network-only` fetchPolicy. | ||
|
|
||
| #### `fetchPolicy` | ||
| * Type: `'cache-first' | 'cache-and-network' | 'network-only'` | ||
| * Default: `'cache-first'` | ||
|
|
||
| Determines the how the default fetchPolicy to be used. A more detailed explanation can be found in [Caching](./caching.md). | ||
|
|
||
| #### `test` | ||
| * Type: `boolean` | ||
| * Default: `false` | ||
|
|
||
| Determines whether the `dataClient` instance will run in test environment. | ||
|
|
||
| #### `initialCache` | ||
| * Type: `object` | ||
| * Default: `{}` | ||
|
|
||
| An object to be used as the client's initial cache. Example usage can be seen in [Client-side hydration](../ssr/client-side-hydration.md). | ||
|
|
||
| #### `headers` | ||
| * Type: `Record<string, string>` | ||
| * Default: `false` | ||
|
|
||
| Set the default headers that will be included in all other fetch requests. Can be used on server side to forward cookies. Does not work on [prefetching](../ssr/prefetching.md) due to how `<link rel="prefetch">` works. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
66 changes: 66 additions & 0 deletions
66
packages/react-isomorphic-data/src/hoc/__tests__/withData.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import * as React from 'react'; | ||
| import { FetchMock } from 'jest-fetch-mock'; | ||
| import { render } from '@testing-library/react'; | ||
| import { createDataClient, DataProvider } from '../../common'; | ||
| import withData from '../withData'; | ||
|
|
||
| const fetchMock = fetch as FetchMock; | ||
|
|
||
| describe('withData HOC with ssrForceFetchDelay', () => { | ||
| const onError = (e: Event) => { | ||
| e.preventDefault(); | ||
| }; | ||
|
|
||
| beforeEach(() => { | ||
| // to suppress error logs from error boundaries | ||
| // https://github.com/facebook/react/issues/11098#issuecomment-412682721 | ||
| window.addEventListener('error', onError); | ||
| fetchMock.resetMocks(); | ||
| jest.useFakeTimers(); | ||
| }); | ||
| afterEach(() => { | ||
| window.removeEventListener('error', onError); | ||
| jest.useRealTimers(); | ||
| }); | ||
|
|
||
| it('should not fetch again; fetchPolicy: "network-only"', async () => { | ||
| const client = createDataClient({ | ||
| initialCache: { | ||
| 'http:': { | ||
| localhost: { | ||
| somewhere: { | ||
| __raw: '{"message":"initial message","randomNumber":55}', | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| ssrForceFetchDelay: 1000, | ||
| }); | ||
|
|
||
| const _Comp: React.FC<{ isoData: any }> = ({ isoData }) => { | ||
| const { data, loading } = isoData; | ||
|
|
||
| return loading || !data ? ( | ||
| <div>loading...</div> | ||
| ) : ( | ||
| <div>{data.message}</div> | ||
| ); | ||
| }; | ||
|
|
||
| const Comp = withData({ | ||
| url: 'http://localhost/somewhere', | ||
| name: 'isoData', | ||
| dataOptions: { skip: false, ssr: true, fetchPolicy: 'network-only' } | ||
| })(_Comp); | ||
| const App = ( | ||
| <DataProvider client={client}> | ||
| <Comp /> | ||
| </DataProvider> | ||
| ); | ||
|
|
||
| const { findByText } = render(App); | ||
|
|
||
| expect(await findByText('initial message')).toBeDefined(); | ||
| }); | ||
|
|
||
| }) |
Oops, something went wrong.