diff --git a/README.md b/README.md index e54b38f..3d94067 100644 --- a/README.md +++ b/README.md @@ -337,6 +337,31 @@ const NewBookForm = () => { }; ``` +### Abort Inflight Requests + +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 as demonstrated below. +```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. 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", 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,