feat(fetchye-one-app): add streaming support

Author: dominic-farquharson

README.md

@@ -957,6 +957,57 @@ A promise resolving to an object with the below keys:
 | `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* |
 | `run`    | `async () => {}` | A function for bypassing the cache and firing an API call. Can be awaited.                                                                                                      |
 
+### streamedFetchye
+
+A helper to enable streaming for server side Fetchye API calls. It can be used the same way as [`oneFetchye`](https://github.com/americanexpress/fetchye?tab=readme-ov-file#oneFetchye).
+
+```js
+import { streamedFetchye } from 'fetchye-one-app';
+
+const loadModuleData = async ({ store: { dispatch } }) => dispatch(streamedFetchye('https://example.com/api/v2/people', {
+  headers: {
+    'Content-Type': 'application/json',
+  },
+}));
+```
+
+### useStreamedFetchye
+
+A React hook used to read streamed data from the server. This hook will throw an error if data does not exist under the requested key.
+
+Note: The hook must be used within a suspense boundary.
+
+```jsx
+import { useStreamedFetchye } from 'fetchye-one-app';
+import { Spinner } from 'design-library';
+
+const MyComponent = () => {
+  const {
+    data,
+  } = useStreamedFetchye('https://example.com/api/v2/people', {
+    headers: {
+    'Content-Type': 'application/json',
+    },
+  }
+  );
+
+  return (
+    <>
+      <p>{data.body.name}</p>
+    </>
+  );
+};
+
+const Container = () => {
+  return (
+    <Suspense fallback={<Spinner size="sm" />}>
+      <MyComponent />
+    </Suspense>
+  )
+}
+
+```
+
 ### Providers
 
 A Provider creates a React Context to connect all the `useFetchye` Hooks into a centrally stored cache.

packages/fetchye-one-app/package.json

@@ -55,6 +55,7 @@
     "@babel/cli": "^7.12.1",
     "@babel/core": "7.11.6",
     "@testing-library/react": "^11.0.4",
+    "@testing-library/react-hooks": "^3.4.2",
     "babel-preset-amex": "^3.4.1",
     "cross-env": "^7.0.2",
     "fetchye-core": "^1.8.0",
@@ -63,6 +64,7 @@
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.2",
     "redux": "^4.0.5",
+    "redux-thunk": "^2.4.2",
     "rimraf": "^3.0.2"
   }
 }

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

@@ -18,3 +18,6 @@ export { makeOneServerFetchye } from './makeOneServerFetchye';
 export OneCache, { oneCacheSelector } from './OneCache';
 export OneFetchyeProvider from './OneFetchyeProvider';
 export oneFetchye from './oneFetchye';
+// streaming
+export { streamedFetchye } from './streaming/streamedFetchye';
+export { useStreamedFetchye } from './streaming/useStreamedFetchye';

packages/fetchye-one-app/src/streaming/actions.js

@@ -0,0 +1,32 @@
+export const storeLocalPromise = (domain, key, promise) => (_a, _b, { promiseStore }) => {
+  promiseStore?.storeLocalPromise(domain, key, promise);
+};
+
+export const getLocalPromise = (domain, key) => (_a, _b, { promiseStore }) => promiseStore?.getLocalPromise(domain, key);
+
+export const getStreamingPromises = () => (_a, _b, { promiseStore }) => {
+  return promiseStore?.getStreamingPromises() ?? [];
+}
+
+export const stream = (promiseArray) => (_a, _b, { promiseStore }) => {
+  if (!Array.isArray(promiseArray)) {
+    throw new TypeError('promiseArray must be an array');
+  }
+
+  promiseArray.forEach(({ domain, key, promise }) => {
+    const storeDomain = domain ?? key;
+    if (domain && typeof domain !== 'string') {
+      throw new TypeError('domain must be a string');
+    }
+
+    if (typeof key !== 'string') {
+      throw new TypeError('key must be a string');
+    }
+
+    if (!(promise instanceof Promise)) {
+      throw new TypeError('promise must be an instance of Promise');
+    }
+
+    promiseStore.storeStreamingPromise(storeDomain, key, promise);
+  });
+};

packages/fetchye-one-app/src/streaming/constants.js

@@ -0,0 +1 @@
+export const STREAM_DOMAIN = '__stream__';

packages/fetchye-one-app/src/streaming/hooks.js

@@ -0,0 +1,10 @@
+// eslint-disable-next-line import/no-extraneous-dependencies -- transitive from fetchye-redux-provider
+import { useDispatch } from 'react-redux';
+import { getStreamingPromises } from './actions';
+import { STREAM_DOMAIN } from './constants';
+
+export const useStreamedPromise = (key, domain = STREAM_DOMAIN) => {
+  const dispatch = useDispatch();
+  const promises = dispatch(getStreamingPromises());
+  return promises?.find((p) => p.key === key && p.domain === (domain || key))?.promise;
+};

packages/fetchye-one-app/src/streaming/streamedFetchye.js

@@ -0,0 +1,20 @@
+import { computeKey } from 'fetchye';
+import { stream } from './actions';
+import { STREAM_DOMAIN } from './constants';
+
+export const streamedFetchye = (fetchyeThunk, key, options = {}) => async (dispatch) => {
+  const { hash: computedKey } = computeKey(key, options);
+  const promise = dispatch(fetchyeThunk);
+
+  dispatch(
+    stream([
+      {
+        key: computedKey,
+        domain: STREAM_DOMAIN,
+        promise,
+      },
+    ])
+  );
+
+  return promise;
+};

packages/fetchye-one-app/src/streaming/useStreamedFetchye.js

@@ -0,0 +1,44 @@
+// eslint-disable-next-line import/no-extraneous-dependencies -- transitive from fetchye-redux-provider
+import { useDispatch } from 'react-redux';
+import { computeKey } from 'fetchye';
+import { useCallback, useMemo } from 'react';
+import { STREAM_DOMAIN } from './constants';
+import oneFetchye from '../oneFetchye';
+import { useStreamedPromise } from './hooks';
+import { getLocalPromise, storeLocalPromise } from './actions';
+
+export const useStreamedFetchye = (
+  key,
+  options = {},
+  fetcher = undefined
+) => {
+  const dispatch = useDispatch();
+  const { hash: promiseStoreKey } = computeKey(key, options);
+  const serverPromise = useStreamedPromise(promiseStoreKey);
+
+  const makeClientRequest = useCallback(() => {
+    const localPromise = dispatch(getLocalPromise(STREAM_DOMAIN, promiseStoreKey));
+    if (localPromise) {
+      return localPromise;
+    }
+
+    const promise = dispatch(oneFetchye(key, options, fetcher));
+
+    dispatch(storeLocalPromise(
+      STREAM_DOMAIN,
+      promiseStoreKey,
+      promise
+    ));
+
+    return promise;
+  }, [key, options, fetcher, promiseStoreKey, dispatch]);
+
+  const shouldUseLocalPromise = !serverPromise;
+
+  const localPromise = useMemo(() => {
+    if (!shouldUseLocalPromise) return null;
+    return makeClientRequest();
+  }, [shouldUseLocalPromise, makeClientRequest]);
+
+  return localPromise || serverPromise;
+};

yarn.lock

@@ -9040,6 +9040,11 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+redux-thunk@^2.4.2:
+  version "2.4.2"
+  resolved "https://artifactory.aexp.com/artifactory/api/npm/npm-virtual/redux-thunk/-/redux-thunk-2.4.2.tgz#b9d05d11994b99f7a91ea223e8b04cf0afa5ef3b"
+  integrity sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==
+
 redux@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"