Add useTriggerableFetch

Author: vinpac

README.md

@@ -57,6 +57,31 @@ const Dogs = () => {
 }
 ```
 
+## useTriggerableFetch
+
+```javascript
+import { useTriggerableFetch } from 'react-fetch-json-hook'
+
+const Dogs = () => {
+  const { trigger, error, loading } = useTriggerableFetch('/api/dogs')
+
+  if (loading) {
+    return <div>Loading...</div>
+  }
+
+  if (error) {
+    return <div>Error! {error.message}</div>
+  }
+
+  return (
+    <ul>
+      <button onClick={trigger}>Fetch Dogs</button>
+      {data && data.dogs.map(dog => <li key={dog.id}>{dog.breed}</li>)}
+    </ul>
+  )
+}
+```
+
 ## Authorization
 
 ```javascript

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-fetch-json-hook",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "main": "lib/index.js",
   "module": "es/index.js",
   "typings": "lib/index.d.ts",

src/FetchConnectorContext.ts

@@ -0,0 +1,4 @@
+import React from 'react'
+import { FetchConnector } from './fetch-connector'
+
+export default React.createContext<FetchConnector | null>(null)

src/FetchHookProvider.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { FetchConnector } from './fetch-connector'
-import { FetchConnectorContext } from './use-fetch'
+import FetchConnectorContext from './FetchConnectorContext'
 
 interface FetchHookProviderProps {
   readonly connector: FetchConnector

src/__tests__/use-fetch.test.tsx

@@ -3,7 +3,8 @@ import { renderHook } from 'react-hooks-testing-library'
 import mockedResponse from '../__mocks__/mocked-response.json'
 import { createFetchConnector, FetchConnector } from '../fetch-connector'
 import fetchJSON from '../fetch-json'
-import useFetch, { FetchConnectorContext } from '../use-fetch'
+import FetchConnectorContext from '../FetchConnectorContext'
+import useFetch from '../use-fetch'
 
 jest.mock('../internal/actHack')
 jest.mock('../fetch-json')

src/__tests__/use-triggerable-fetch.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { renderHook } from 'react-hooks-testing-library'
+import mockedResponse from '../__mocks__/mocked-response.json'
+import { createFetchConnector, FetchConnector } from '../fetch-connector'
+import fetchJSON from '../fetch-json'
+import FetchConnectorContext from '../FetchConnectorContext'
+import useTriggerableFetch from '../use-triggerable-fetch'
+
+jest.mock('../internal/actHack')
+jest.mock('../fetch-json')
+
+const mockedFetchJSON = (fetchJSON as unknown) as jest.Mock<typeof fetchJSON>
+
+const createWrapperComponent = (connector: FetchConnector) => {
+  const WrapperComponent: React.FC<{ children?: React.ReactNode }> = ({
+    children,
+  }) => (
+    <FetchConnectorContext.Provider value={connector}>
+      {children}
+    </FetchConnectorContext.Provider>
+  )
+
+  return WrapperComponent
+}
+
+describe('UseTriggerableFetchHook', () => {
+  test('should fetch without error', async () => {
+    const connector = createFetchConnector()
+    const hook = renderHook(() => useTriggerableFetch('/foo'), {
+      wrapper: createWrapperComponent(connector),
+    })
+
+    expect(hook.result.current.error).toEqual(undefined)
+    expect(hook.result.current.data).toEqual(undefined)
+    expect(typeof hook.result.current.trigger).toEqual('function')
+    expect(hook.result.current.loading).toEqual(false)
+    hook.result.current.trigger()
+    expect(hook.result.current.error).toEqual(undefined)
+    expect(hook.result.current.data).toEqual(undefined)
+    expect(typeof hook.result.current.trigger).toEqual('function')
+    expect(hook.result.current.loading).toEqual(true)
+    await hook.waitForNextUpdate()
+    expect(hook.result.current.error).toEqual(undefined)
+    expect(hook.result.current.data).toEqual(mockedResponse['/foo'])
+    expect(typeof hook.result.current.trigger).toEqual('function')
+    expect(hook.result.current.loading).toEqual(false)
+    expect(mockedFetchJSON.mock.calls.length).toBe(1)
+  })
+})

src/index.ts

@@ -1,5 +1,7 @@
 export { default as useFetch } from './use-fetch'
 export { default as FetchHookProvider } from './FetchHookProvider'
+export { default as FetchConnectorContext } from './FetchConnectorContext'
+export { default as useTriggerableFetch } from './use-triggerable-fetch'
 export { default as getMarkupFromTree } from './get-markup-from-tree'
 export * from './fetch-connector'
 export * from './internal/ssr-context'

src/use-fetch.ts

@@ -5,12 +5,9 @@ import {
   registerItemToFetchConnector,
   uncacheQueries,
 } from './fetch-connector'
-import actHack from './internal/actHack'
+import fetchConnectorContext from './FetchConnectorContext'
 import { FetchSSRManagerContext } from './get-markup-from-tree'
-
-export const FetchConnectorContext = React.createContext<FetchConnector | null>(
-  null,
-)
+import actHack from './internal/actHack'
 
 export interface FetchMorePlan<Payload, NextPayload> extends RequestInit {
   uri: string
@@ -85,7 +82,7 @@ export default function useFetch<Payload>(
   options?: UseFetchOptions,
 ): FetchHookResult<Payload> {
   const { stackSize = 3 } = options || {}
-  const fetchConnector = useContext(FetchConnectorContext)
+  const fetchConnector = useContext(fetchConnectorContext)
   const ssrManager = useContext(FetchSSRManagerContext)
   const queryId = useMemo(() => createQueryCacheId(uri, options), [
     uri,

src/use-triggerable-fetch.ts

@@ -0,0 +1,49 @@
+import { useCallback, useContext, useMemo, useState } from 'react'
+import fetchJSON from './fetch-json'
+import FetchConnectorContext from './FetchConnectorContext'
+import actHack from './internal/actHack'
+
+interface MutationFetchHookState<Payload> {
+  data?: Payload
+  loading: boolean
+  error?: Error
+}
+
+export default function useTriggerableFetch<Payload>(url: string) {
+  const fetchConnector = useContext(FetchConnectorContext)
+
+  if (!fetchConnector) {
+    throw new Error(
+      'useFetch should not be used outside <FetchConnectorContext.Provider />',
+    )
+  }
+
+  const [state, setState] = useState<MutationFetchHookState<Payload>>({
+    loading: false,
+  })
+  const trigger = useCallback(
+    async (body?: any, options?: RequestInit) => {
+      actHack(() => setState({ loading: true }))
+      try {
+        const data: Payload = await fetchJSON(url, {
+          ...options,
+          headers: {
+            ...fetchConnector.requestHeaders,
+            ...(options && options.headers),
+          },
+          body,
+        })
+        actHack(() => setState({ data, loading: false }))
+
+        return data
+      } catch (error) {
+        actHack(() => setState({ error, loading: false }))
+        return error
+      }
+    },
+    [url, setState],
+  )
+  const result = useMemo(() => ({ ...state, trigger }), [state, trigger])
+
+  return result
+}