Provide original request in response interceptor (#319) (#344)

* Provide original request in response interceptor (#319)

* Update README adding request to response interceptor

* Add test to cover request as part of response interceptor parameters

Author: Francesco Benedetto

README.md

@@ -602,7 +602,7 @@ function App() {
         return options
       },
       // every time we make an http request, before getting the response back, this will run
-      response: async ({ response }) => {
+      response: async ({ response, request }) => {
         // unfortunately, because this is a JS Response object, we have to modify it directly.
         // It shouldn't have any negative affect since this is getting reset on each request.
         const res = response
@@ -822,8 +822,10 @@ const options = {
     request: async ({ options, url, path, route }) => { // `async` is not required
       return options // returning the `options` is important
     },
-    response: async ({ response }) => {
-      // note: `response.data` is equivalent to `await response.json()`
+    response: async ({ response, request }) => {
+      // notes:
+      // - `response.data` is equivalent to `await response.json()`
+      // - `request` is an object matching the standard fetch's options
       return response // returning the `response` is important
     }
   },

src/__tests__/useFetch.test.tsx

@@ -10,7 +10,7 @@ import { toCamel } from 'convert-keys'
 import { renderHook, act } from '@testing-library/react-hooks'
 import mockConsole from 'jest-mock-console'
 import * as mockdate from 'mockdate'
-import defaults from '../defaults'
+import defaults, { useFetchArgsDefaults } from '../defaults'
 
 import { Res, IncomingOptions, CachePolicies } from '../types'
 import { emptyCustomResponse, sleep, makeError, addSlash } from '../utils'
@@ -581,10 +581,25 @@ describe('useFetch - BROWSER - interceptors', (): void => {
     )
   }
 
+  const response = jest.fn(({ response: res }) => res)
+  const mockResInterceptorWrapper = ({ children }: { children?: ReactNode }): ReactElement => {
+    const options: IncomingOptions = {
+      interceptors: {
+        request,
+        response
+      },
+      cachePolicy: NO_CACHE
+    }
+    return (
+      <Provider url='https://example.com' options={options}>{children}</Provider>
+    )
+  }
+
   afterEach((): void => {
     fetch.resetMocks()
     cleanup()
     request.mockClear()
+    response.mockClear()
   })
 
   beforeEach((): void => {
@@ -643,6 +658,44 @@ describe('useFetch - BROWSER - interceptors', (): void => {
     expect(request.mock.calls[0][0].url).toBe('https://example.com')
   })
 
+  it('should pass the proper request to `interceptors.response`', async (): Promise<void> => {
+    const { result } = renderHook(
+      () => useFetch(),
+      { wrapper: mockResInterceptorWrapper }
+    )
+    await act(result.current.get)
+    expect(fetch.mock.calls[0][0]).toBe('https://example.com')
+    expect(request.mock.calls[0][0].url).toBe('https://example.com')
+    expect(response.mock.calls[0][0].request).toStrictEqual(useFetchArgsDefaults.requestInit)
+  })
+
+  it('should pass custom request options to `interceptors.response`', async (): Promise<void> => {
+    const customReqOptions: RequestInit = {
+      headers: {
+        Authorization: 'Bearer TOKEN'
+      },
+      credentials: 'include',
+      cache: 'no-store'
+    }
+    const { result } = renderHook(
+      () => useFetch('https://custom-url.com', customReqOptions),
+      { wrapper: mockResInterceptorWrapper }
+    )
+    await act(result.current.get)
+    expect(fetch.mock.calls[0][0]).toBe('https://custom-url.com')
+    expect(request.mock.calls[0][0].url).toBe('https://custom-url.com')
+
+    const expectedOpts = {
+      headers: {
+        ...useFetchArgsDefaults.requestInit.headers,
+        ...customReqOptions.headers
+      },
+      credentials: customReqOptions.credentials,
+      cache: customReqOptions.cache
+    }
+    expect(response.mock.calls[0][0].request).toStrictEqual(expectedOpts)
+  })
+
   it('should still call both interceptors when using cache', async (): Promise<void> => {
     let requestCalled = 0
     let responseCalled = 0

src/types.ts

@@ -163,7 +163,7 @@ export type UseFetch<TData> = UseFetchArrayReturn<TData> &
 
 export type Interceptors<TData = any> = {
   request?: ({ options, url, path, route }: { options: RequestInit, url?: string, path?: string, route?: string }) => Promise<RequestInit> | RequestInit
-  response?: ({ response }: { response: Res<TData> }) => Promise<Res<TData>>
+  response?: ({ response }: { response: Res<TData>, request: RequestInit }) => Promise<Res<TData>>
 }
 
 // this also holds the response keys. It mimics js Map

src/useFetch.ts

@@ -112,7 +112,7 @@ function useFetch<TData = any>(...args: UseFetchArgs): UseFetch<TData> {
         newData = await tryGetData(newRes, defaults.data, responseType)
         res.current.data = onNewData(data.current, newData)
 
-        res.current = interceptors.response ? await interceptors.response({ response: res.current }) : res.current
+        res.current = interceptors.response ? await interceptors.response({ response: res.current, request: requestInit }) : res.current
         invariant('data' in res.current, 'You must have `data` field on the Response returned from your `interceptors.response`')
         data.current = res.current.data as TData