From d79ed5c87384952942ca09b677dc588abaf21b06 Mon Sep 17 00:00:00 2001 From: Danny Date: Thu, 3 Aug 2023 14:43:10 -0400 Subject: [PATCH 1/5] feat(signal): remove passed signal from defautlMapOptionsToKey --- packages/fetchye/src/defaultMapOptionsToKey.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/fetchye/src/defaultMapOptionsToKey.js b/packages/fetchye/src/defaultMapOptionsToKey.js index ba153f2..751eb09 100644 --- a/packages/fetchye/src/defaultMapOptionsToKey.js +++ b/packages/fetchye/src/defaultMapOptionsToKey.js @@ -16,6 +16,7 @@ export const defaultMapOptionsToKey = (options) => { const { + signal, defer, mapOptionsToKey, initialData, From 8d56cbd5f22a0cf638eb07d7e0c525938c3e0d60 Mon Sep 17 00:00:00 2001 From: dpepin Date: Mon, 21 Aug 2023 10:19:35 -0400 Subject: [PATCH 2/5] feat(signal): update test to test if signal is removed from snapshot --- packages/fetchye/__tests__/defaultMapOptionsToKey.spec.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/fetchye/__tests__/defaultMapOptionsToKey.spec.js b/packages/fetchye/__tests__/defaultMapOptionsToKey.spec.js index 32b47bd..744a83d 100644 --- a/packages/fetchye/__tests__/defaultMapOptionsToKey.spec.js +++ b/packages/fetchye/__tests__/defaultMapOptionsToKey.spec.js @@ -17,8 +17,10 @@ import { defaultMapOptionsToKey } from '../src/defaultMapOptionsToKey'; describe('defaultMapOptionsToKey', () => { - it('should return an object without passed defer or mapOptionsToKey', () => { - expect(defaultMapOptionsToKey({ defer: true, mapOptionsToKey: () => {}, method: 'POST' })) + it('should return an object without passed signal, defer, or mapOptionsToKey', () => { + expect(defaultMapOptionsToKey({ + signal: {}, defer: true, mapOptionsToKey: () => { }, method: 'POST', + })) .toMatchInlineSnapshot(` Object { "method": "POST", From 033115db1207ee6580cf24b7750a55e7c0621da0 Mon Sep 17 00:00:00 2001 From: dpepin Date: Mon, 21 Aug 2023 14:09:50 -0400 Subject: [PATCH 3/5] feat(signal): update readme --- README.md | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index e54b38f..9c3d6be 100644 --- a/README.md +++ b/README.md @@ -337,6 +337,31 @@ const NewBookForm = () => { }; ``` +### Abort Signal + +When you neeed to abort the execution of a `useFetchye` call, you may +pass a signal as an option in such way. + +```jsx +import React, { useEffect } from 'react'; +import { useFetchye } from 'fetchye'; + +const AbortComponent = () => { + const controller = new AbortController(); + useFetchye('http://example.com/api/books', { signal: controller.signal }); + + useEffect(() => () => controller.abort(), []); + + return ( +
+

abortable component

+
+ ); +}; +``` +Instead of setting up a `useEffect` within the component it's possible to pass a hook to signal using packages such as +[use-unmount-signal](https://www.npmjs.com/package/use-unmount-signal/v/1.0.0). + ### Sequential API Execution Passing the 'isLoading' value from one useFetchye call to the 'defer' field of the next will prevent the second call from being made until the first has loaded. @@ -748,7 +773,7 @@ A React Hook used for dispatching asynchronous API requests. **Shape** ``` -const { isLoading, data, error, run } = useFetchye(key, { defer: Boolean, mapOptionsToKey: options => options, ...fetchOptions }, fetcher); +const { isLoading, data, error, run } = useFetchye(key, { signal: {}, defer: Boolean, mapOptionsToKey: options => options, ...fetchOptions }, fetcher); ``` **Arguments** @@ -765,6 +790,7 @@ const { isLoading, data, error, run } = useFetchye(key, { defer: Boolean, mapOpt |--------------------|-------------------------------------------------------|----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `mapOptionsToKey` | `(options: Options) => transformedOptions` | `false` | A function that maps options to the key that will become part of the cache key | | `mapKeyToCacheKey` | `(key: String, options: Options) => cacheKey: String` | `false` | A function that maps the key for use as the cacheKey allowing direct control of the cacheKey | +| `signal` | `Object` | `false` | Prevents execution of `useFetchye` when desired cancelling DOM request (See [Abort Controller](https://developer.mozilla.org/en-US/docs/Web/API/AbortController)). | | `defer` | `Boolean` | `false` | Prevents execution of `useFetchye` on each render in favor of using the returned `run` function. *Defaults to `false`* | | `initialData` | `Object` | `false` | Seeds the initial data on first render of `useFetchye` to accomodate server side rendering *Defaults to `undefined`* | | `...restOptions` | `ES6FetchOptions` | `true` | Contains any ES6 Compatible `fetch` option. (See [Fetch Options](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Supplying_request_options)) | From 09039947b3bc9acca92d82cff0afc545ac9e69a9 Mon Sep 17 00:00:00 2001 From: dpepin Date: Thu, 24 Aug 2023 16:01:19 -0400 Subject: [PATCH 4/5] feat(signal): update readme --- README.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 9c3d6be..5d823fd 100644 --- a/README.md +++ b/README.md @@ -337,11 +337,11 @@ const NewBookForm = () => { }; ``` -### Abort Signal +### Abort Inflight Requests -When you neeed to abort the execution of a `useFetchye` call, you may -pass a signal as an option in such way. +When you neeed to abort the execution of requests inflight, passing a signal from the [Abort Controller](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) API to `useFetchye` as an option will enable this. +Considering `useFetchye` is a wrapper around fetch, passing a signal is the same and provides the same functionality. ```jsx import React, { useEffect } from 'react'; import { useFetchye } from 'fetchye'; @@ -773,7 +773,7 @@ A React Hook used for dispatching asynchronous API requests. **Shape** ``` -const { isLoading, data, error, run } = useFetchye(key, { signal: {}, defer: Boolean, mapOptionsToKey: options => options, ...fetchOptions }, fetcher); +const { isLoading, data, error, run } = useFetchye(key, { defer: Boolean, mapOptionsToKey: options => options, ...fetchOptions }, fetcher); ``` **Arguments** @@ -790,7 +790,6 @@ const { isLoading, data, error, run } = useFetchye(key, { signal: {}, defer: Boo |--------------------|-------------------------------------------------------|----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `mapOptionsToKey` | `(options: Options) => transformedOptions` | `false` | A function that maps options to the key that will become part of the cache key | | `mapKeyToCacheKey` | `(key: String, options: Options) => cacheKey: String` | `false` | A function that maps the key for use as the cacheKey allowing direct control of the cacheKey | -| `signal` | `Object` | `false` | Prevents execution of `useFetchye` when desired cancelling DOM request (See [Abort Controller](https://developer.mozilla.org/en-US/docs/Web/API/AbortController)). | | `defer` | `Boolean` | `false` | Prevents execution of `useFetchye` on each render in favor of using the returned `run` function. *Defaults to `false`* | | `initialData` | `Object` | `false` | Seeds the initial data on first render of `useFetchye` to accomodate server side rendering *Defaults to `undefined`* | | `...restOptions` | `ES6FetchOptions` | `true` | Contains any ES6 Compatible `fetch` option. (See [Fetch Options](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Supplying_request_options)) | From aedde2442a8c970328d473fd5304b9977c027e6a Mon Sep 17 00:00:00 2001 From: dpepin Date: Thu, 24 Aug 2023 16:03:37 -0400 Subject: [PATCH 5/5] feat(signal): update wording --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5d823fd..3d94067 100644 --- a/README.md +++ b/README.md @@ -341,7 +341,7 @@ const NewBookForm = () => { When you neeed to abort the execution of requests inflight, passing a signal from the [Abort Controller](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) API to `useFetchye` as an option will enable this. -Considering `useFetchye` is a wrapper around fetch, passing a signal is the same and provides the same functionality. +Considering `useFetchye` is a wrapper around fetch, passing a signal is the same and provides the same functionality as demonstrated below. ```jsx import React, { useEffect } from 'react'; import { useFetchye } from 'fetchye';