Skip to content

Commit f6ec47e

Browse files
authored
feat(oneFetchye): Introduce new imperative api
deprecate makeOneServerFetchye
1 parent 7f768d2 commit f6ec47e

File tree

4 files changed

+89
-13
lines changed

4 files changed

+89
-13
lines changed

README.md

Lines changed: 42 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,7 @@ const MyComponent = () => {
207207
npm i -S fetchye fetchye-one-app
208208
```
209209
210-
`fetchye-one-app` provides pre-configured `provider`, `cache`, `makeOneServerFetchye`
210+
`fetchye-one-app` provides pre-configured `provider`, `cache`, `oneFetchye`
211211
and `oneCacheSelector` to ensure that all modules use the same cache and reduce the chance for cache misses.
212212
These all have restricted APIs to reduce the chance for misconfiguration however if you require more control/customization
213213
use [`ImmutableCache`](#immutablecache), [`FetchyeReduxProvider`](#fetchyereduxprovider) and [`makeServerFetchye`](#makeserverfetchye). Please bear in mind that this can impact modules which are do not use the same configuration.
@@ -633,13 +633,13 @@ export default BookList;
633633
634634
#### One App SSR
635635
636-
Using `makeOneServerFetchye` from `fetchye-one-app` ensures that the cache will
636+
Using `oneFetchye` from `fetchye-one-app` ensures that the cache will
637637
always be configured correctly.
638638
639639
```jsx
640640
import React from 'react';
641641
import { useFetchye } from 'fetchye';
642-
import { makeOneServerFetchye } from 'fetchye-one-app';
642+
import { oneFetchye } from 'fetchye-one-app';
643643

644644
const BookList = () => {
645645
const { isLoading, data } = useFetchye('http://example.com/api/books/');
@@ -654,19 +654,14 @@ const BookList = () => {
654654
};
655655

656656
BookList.holocron = {
657-
loadModuleData: async ({ store: { dispatch, getState }, fetchClient }) => {
657+
loadModuleData: async ({ store: { dispatch } }) => {
658658
if (global.BROWSER) {
659659
return;
660660
}
661-
const fetchye = makeOneServerFetchye({
662-
// Redux store
663-
store: { dispatch, getState },
664-
fetchClient,
665-
});
666661

667-
// async/await fetchye has same arguments as useFetchye
662+
// oneFetchye has same arguments as useFetchye
668663
// dispatches events into the server side Redux store
669-
await fetchye('http://example.com/api/books/');
664+
await dispatch(oneFetchye('http://example.com/api/books/'));
670665
},
671666
};
672667

@@ -795,12 +790,16 @@ const ParentComponent = ({ children }) => (
795790
796791
* [`useFetchye`](#usefetchye)
797792
* [`makeServerFetchye`](#makeserverfetchye)
793+
* [`makeOneServerFetchye`](#makeoneserverfetchye) (deprecated)
794+
* [`oneFetchye`](#oneFetchye)
798795
* [Providers](#providers)
799796
* [`FetchyeProvider`](#fetchyeprovider)
800797
* [`FetchyeReduxProvider`](#fetchyereduxprovider)
798+
* [`OneFetchyeProvider`](#oneFetchyeProvider)
801799
* [Caches](#caches)
802800
* [`SimpleCache`](#simplecache)
803801
* [`ImmutableCache`](#immutablecache)
802+
* [`OneCache`](#onecache)
804803
* [Actions](#actions)
805804
* [`IS_LOADING`](#is_loading)
806805
* [`SET_DATA`](#set_data)
@@ -885,6 +884,8 @@ const { data, error } = await fetchye(key, options, fetcher);
885884
886885
### `makeOneServerFetchye`
887886
887+
DEPRECATED: You should use `dispatch(oneFetchye(key, options, fetcher))` (see docs below) in place of `makeOneServerFetchye`
888+
888889
A factory function used to generate an async/await fetchye function used for making One App server-side API calls.
889890
890891
**Shape**
@@ -895,13 +896,13 @@ const fetchye = makeOneServerFetchye({ store, fetchClient });
895896
const { data, error } = await fetchye(key, options, fetcher);
896897
```
897898
898-
**`makeServerFetchye` Arguments**
899+
**`makeOneServerFetchye` Arguments**
899900
900901
| name | type | required | description |
901902
|---|---|---|---|
902903
| `cache` | `Cache` | `false` | *Defaults to OneCache* Fetchye `Cache` object. |
903904
| `fetchClient` | `ES6Fetch` | `true` | A [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) compatible function. |
904-
| `store` | `Store` | `true` | A [Redux Store](https://redux.js.org/api/store)
905+
| `store` | `Store` | `true` | A [Redux Store](https://redux.js.org/api/store) |
905906
906907
**`fetchye` Arguments**
907908
@@ -919,6 +920,34 @@ const { data, error } = await fetchye(key, options, fetcher);
919920
| `error?` | `Object` | An object containing an error if present. *Defaults to an `Error` object with a thrown `fetch` error. This is not for API errors (e.g. Status 500 or 400). See `data` for that* |
920921
921922
923+
### oneFetchye
924+
925+
Call fetchye in an imperative context, such as in One App's loadModuleData, in a Redux Thunk, or in an useEffect.
926+
927+
**Shape**
928+
929+
```
930+
const { data, error } = await dispatch(onefetchye(key, options, fetcher));
931+
```
932+
933+
**`onefetchye` Arguments**
934+
935+
| name | type | required | description |
936+
|-----------|------------------------------------------------------------------------------------------------------|------------|---------------------------------------------------------------------------------------------------------------------------------------------------|
937+
| `key` | `String` or `() => String` | `true` | A string or function returning a string that factors into cache key creation. *Defaults to URL compatible string*. |
938+
| `options` | `ES6FetchOptions` | `false` | Options to pass through to [ES6 Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). |
939+
| `fetcher` | `async (fetchClient: Fetch, key: String, options: Options) => ({ payload: Object, error?: Object })` | `false` | The async function that calls `fetchClient` by key and options. Returns a `payload` with outcome of `fetchClient` and an optional `error` object. |
940+
941+
**`onefetchye` Returns**
942+
943+
A promise resolving to an object with the below keys:
944+
945+
| name | type | description |
946+
|----------|----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
947+
| `data` | `Object` | A result of a `fetchClient` query. *Defaults to returning `{ status, body, ok, headers }` from `fetchClient` response* |
948+
| `error?` | `Object` | An object containing an error if present. *Defaults to an `Error` object with a thrown `fetch` error. This is not for API errors (e.g. Status 500 or 400). See `data` for that* |
949+
950+
922951
### Providers
923952
924953
A Provider creates a React Context to connect all the `useFetchye` Hooks into a centrally stored cache.
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import oneFetchye from '../src/oneFetchye';
2+
3+
const mockOneCacheSymbol = Symbol('oneCache');
4+
jest.mock('../src/OneCache', () => jest.fn(() => mockOneCacheSymbol));
5+
jest.mock('fetchye', () => ({
6+
makeServerFetchye: jest.fn((...makeFetchyeArgs) => jest.fn((...fetcheArgs) => Promise.resolve(
7+
{ makeFetchyeArgs, fetcheArgs }
8+
))),
9+
}));
10+
describe('oneFetchye', () => {
11+
it('should return a one-app-thunk that calls fetchye', async () => {
12+
expect.assertions(1);
13+
const fetchyeParams = [Symbol('fetchyeArgs 1'), Symbol('fetchyeArgs 2')];
14+
const fetchyeThunk = oneFetchye(...fetchyeParams);
15+
const thunkParams = [Symbol('dispatch'), Symbol('getState'), Symbol('fetchClient')];
16+
const response = await fetchyeThunk(
17+
thunkParams[0], thunkParams[1], { fetchClient: thunkParams[2] }
18+
);
19+
expect(response).toStrictEqual({
20+
fetcheArgs: fetchyeParams,
21+
makeFetchyeArgs: [
22+
{
23+
cache: mockOneCacheSymbol,
24+
fetchClient: thunkParams[2],
25+
store: {
26+
dispatch: thunkParams[0],
27+
getState: thunkParams[1],
28+
},
29+
},
30+
],
31+
});
32+
});
33+
});

packages/fetchye-one-app/src/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,4 @@
1717
export { makeOneServerFetchye } from './makeOneServerFetchye';
1818
export OneCache, { oneCacheSelector } from './OneCache';
1919
export OneFetchyeProvider from './OneFetchyeProvider';
20+
export oneFetchye from './oneFetchye';
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { makeServerFetchye } from 'fetchye';
2+
import OneCache from './OneCache';
3+
4+
const oneFetchye = (...fetchyeArgs) => async (dispatch, getState, { fetchClient }) => {
5+
const fetchye = makeServerFetchye({
6+
store: { getState, dispatch },
7+
fetchClient,
8+
cache: OneCache(),
9+
});
10+
return fetchye(...fetchyeArgs);
11+
};
12+
13+
export default oneFetchye;

0 commit comments

Comments
 (0)