Skip to content

Commit 8bb4b36

Browse files
authored
feat(signal): remove passed signal from defautlMapOptionsToKey (#83)
* feat(signal): remove passed signal from defautlMapOptionsToKey * feat(signal): update test to test if signal is removed from snapshot * feat(signal): update readme * feat(signal): update readme * feat(signal): update wording
1 parent eed68a4 commit 8bb4b36

File tree

3 files changed

+30
-2
lines changed

3 files changed

+30
-2
lines changed

README.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -337,6 +337,31 @@ const NewBookForm = () => {
337337
};
338338
```
339339
340+
### Abort Inflight Requests
341+
342+
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.
343+
344+
Considering `useFetchye` is a wrapper around fetch, passing a signal is the same and provides the same functionality as demonstrated below.
345+
```jsx
346+
import React, { useEffect } from 'react';
347+
import { useFetchye } from 'fetchye';
348+
349+
const AbortComponent = () => {
350+
const controller = new AbortController();
351+
useFetchye('http://example.com/api/books', { signal: controller.signal });
352+
353+
useEffect(() => () => controller.abort(), []);
354+
355+
return (
356+
<div>
357+
<h1>abortable component</h1>
358+
</div>
359+
);
360+
};
361+
```
362+
Instead of setting up a `useEffect` within the component it's possible to pass a hook to signal using packages such as
363+
[use-unmount-signal](https://www.npmjs.com/package/use-unmount-signal/v/1.0.0).
364+
340365
### Sequential API Execution
341366
342367
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.

packages/fetchye/__tests__/defaultMapOptionsToKey.spec.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,10 @@
1717
import { defaultMapOptionsToKey } from '../src/defaultMapOptionsToKey';
1818

1919
describe('defaultMapOptionsToKey', () => {
20-
it('should return an object without passed defer or mapOptionsToKey', () => {
21-
expect(defaultMapOptionsToKey({ defer: true, mapOptionsToKey: () => {}, method: 'POST' }))
20+
it('should return an object without passed signal, defer, or mapOptionsToKey', () => {
21+
expect(defaultMapOptionsToKey({
22+
signal: {}, defer: true, mapOptionsToKey: () => { }, method: 'POST',
23+
}))
2224
.toMatchInlineSnapshot(`
2325
Object {
2426
"method": "POST",

packages/fetchye/src/defaultMapOptionsToKey.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616

1717
export const defaultMapOptionsToKey = (options) => {
1818
const {
19+
signal,
1920
defer,
2021
mapOptionsToKey,
2122
initialData,

0 commit comments

Comments
 (0)