Add 'defer' and 'json' options to useFetch.

Author: ghengeveld

README.md

@@ -181,9 +181,11 @@ const MyComponent = () => {
 }
 ```
 
-`useFetch` takes the same arguments as [fetch] itself, as well as options to the underlying `useAsync` hook. `useFetch`
-automatically uses `promiseFn` or `deferFn` based on the request method (`deferFn` for POST / PUT / PATCH / DELETE) and
-handles JSON parsing if the `Accept` header is set to `"application/json"`.
+`useFetch` takes the same arguments as [fetch] itself, as well as `options` to the underlying `useAsync` hook. The
+`options` object takes two special boolean properties: `defer` and `json`. These can be used to switch between
+`deferFn` and `promiseFn`, and enable JSON parsing. By default `useFetch` automatically uses `promiseFn` or `deferFn`
+based on the request method (`deferFn` for POST / PUT / PATCH / DELETE) and handles JSON parsing if the `Accept` header
+is set to `"application/json"`.
 
 [fetch]: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
 
@@ -287,6 +289,11 @@ These can be passed in an object to `useAsync()`, or as props to `<Async>` and c
 - `onResolve` Callback invoked when Promise resolves.
 - `onReject` Callback invoked when Promise rejects.
 
+`useFetch` additionally takes these options:
+
+- `defer` Force the use of `deferFn` or `promiseFn`.
+- `json` Enable JSON parsing of the response.
+
 #### `promise`
 
 > `Promise`
@@ -354,6 +361,20 @@ Callback function invoked when a promise resolves, receives data as argument.
 
 Callback function invoked when a promise rejects, receives rejection reason (error) as argument.
 
+#### `defer`
+
+> `boolean`
+
+Enables the use of `deferFn` if `true`, or enables the use of `promiseFn` if `false`. By default this is automatically
+chosen based on the request method (`deferFn` for POST / PUT / PATCH / DELETE, `promiseFn` otherwise).
+
+#### `json`
+
+> `boolean`
+
+Enables or disables JSON parsing of the response body. By default this is automatically enabled if the `Accept` header
+is set to `"application/json"`.
+
 ### Render props
 
 `<Async>` provides the following render props to the `children` function:

src/index.d.ts

@@ -66,10 +66,14 @@ interface FetchInit {
   headers?: Headers | object
 }
 
+interface FetchOptions<T> extends AsyncOptions<T> {
+  defer?: boolean
+}
+
 export function useFetch<T>(
   input: Request | string,
   init?: FetchInit,
-  options?: AsyncOptions<T>
+  options?: FetchOptions<T>
 ): AsyncState<T>
 
 export default createInstance

src/useAsync.js

@@ -117,18 +117,20 @@ const useAsync = (arg1, arg2) => {
   )
 }
 
-const parseResponse = accept => res => {
+const parseResponse = (accept, json) => res => {
   if (!res.ok) return Promise.reject(res)
-  if (accept === "application/json") return res.json()
+  if (json === false) return res
+  if (json === true || accept === "application/json") return res.json()
   return res
 }
 
-const useAsyncFetch = (input, init, options) => {
+const useAsyncFetch = (input, init, { defer, json, ...options } = {}) => {
   const method = input.method || (init && init.method)
   const headers = input.headers || (init && init.headers) || {}
   const accept = headers["Accept"] || headers["accept"] || (headers.get && headers.get("accept"))
-  const doFetch = (input, init) => window.fetch(input, init).then(parseResponse(accept))
-  const fn = ~["POST", "PUT", "PATCH", "DELETE"].indexOf(method) ? "deferFn" : "promiseFn"
+  const doFetch = (input, init) => window.fetch(input, init).then(parseResponse(accept, json))
+  const isDefer = defer === true || ~["POST", "PUT", "PATCH", "DELETE"].indexOf(method)
+  const fn = defer === false || !isDefer ? "promiseFn" : "deferFn"
   const state = useAsync({
     ...options,
     [fn]: useCallback(

src/useAsync.spec.js

@@ -14,11 +14,12 @@ window.fetch = jest.fn(() => Promise.resolve({ ok: true, json }))
 
 beforeEach(abortCtrl.abort.mockClear)
 beforeEach(window.fetch.mockClear)
+beforeEach(json.mockClear)
 afterEach(cleanup)
 
 const Async = ({ children = () => null, ...props }) => children(useAsync(props))
-const Fetch = ({ children = () => null, input, init, ...props }) =>
-  children(useFetch(input, init, props))
+const Fetch = ({ children = () => null, input, init, options }) =>
+  children(useFetch(input, init, options))
 
 describe("useAsync", () => {
   describe("common", common(Async, abortCtrl))
@@ -67,9 +68,54 @@ describe("useFetch", () => {
     )
   })
 
+  test("defer=true uses deferFn", () => {
+    const component = (
+      <Fetch input="/test" options={{ defer: true }}>
+        {({ run }) => <button onClick={run}>run</button>}
+      </Fetch>
+    )
+    const { getByText } = render(component)
+    expect(window.fetch).not.toHaveBeenCalled()
+    fireEvent.click(getByText("run"))
+    expect(window.fetch).toHaveBeenCalledWith(
+      "/test",
+      expect.objectContaining({ signal: abortCtrl.signal })
+    )
+  })
+
+  test("defer=false uses promiseFn", () => {
+    render(
+      <Fetch input="/test" init={{ method: "POST" }} options={{ defer: false }}>
+        {({ run }) => <button onClick={run}>run</button>}
+      </Fetch>
+    )
+    expect(window.fetch).toHaveBeenCalledWith(
+      "/test",
+      expect.objectContaining({ method: "POST", signal: abortCtrl.signal })
+    )
+  })
+
   test("automatically handles JSON parsing", async () => {
     render(<Fetch input="/test" init={{ headers: { accept: "application/json" } }} />)
     await Promise.resolve()
     expect(json).toHaveBeenCalled()
   })
+
+  test("json=false disables JSON parsing", async () => {
+    render(
+      <Fetch
+        input="/test"
+        init={{ headers: { accept: "application/json" } }}
+        options={{ json: false }}
+      />
+    )
+    await Promise.resolve()
+    expect(json).not.toHaveBeenCalled()
+  })
+
+  test("json=true enables JSON parsing", async () => {
+    render(<Fetch input="/test" options={{ json: true }} />)
+    await Promise.resolve()
+    expect(json).toHaveBeenCalled()
+  })
 })