Response type (#244)

* v1.0.3

* v1.0.4

* 1 test failing, first go at `responseType`

* updating gh docs

* cleanup, tests, finished feature

* rename ResponseTypes -> ResponseType

* cleaning up docs

Author: iamthesiz

README.md

@@ -72,7 +72,7 @@ Features
 
 - SSR (server side rendering) support
 - TypeScript support
-- 1 dependency ([use-ssr](https://github.com/alex-cory/use-ssr))
+- 2 dependencies ([use-ssr](https://github.com/alex-cory/use-ssr), [urs](https://github.com/alex-cory/urs))
 - GraphQL support (queries + mutations)
 - Provider to set default `url` and `options`
 - Request/response interceptors <!--https://github.com/ava/use-http#user-content-interceptors-->
@@ -855,6 +855,7 @@ This is exactly what you would pass to the normal js `fetch`, with a little extr
 | `path` | When using a global `url` set in the `Provider`, this is useful for adding onto it       | `''` |
 | `persist` | Persists data for the duration of `cacheLife`. If `cacheLife` is not set it defaults to 24h. Currently only available in Browser. | `false` |
 | `perPage` | Stops making more requests if there is no more data to fetch. (i.e. if we have 25 todos, and the perPage is 10, after fetching 2 times, we will have 20 todos. The last 5 tells us we don't have any more to fetch because it's less than 10) For pagination. | `0` |
+| `responseType` | This will determine how the `data` field is set. If you put `json` then it will try to parse it as JSON. If you set it as an array, it will attempt to parse the `response` in the order of the types you put in the array. Read about why we don't put `formData` in the defaults [in the yellow Note part here](https://developer.mozilla.org/en-US/docs/Web/API/Body/formData).  | `['json', 'text', 'blob', 'readableStream']` |
 | `retries` | When a request fails or times out, retry the request this many times. By default it will not retry.    | `0` |
 | `retryDelay` | You can retry with certain intervals i.e. 30 seconds `30000` or with custom logic (i.e. to increase retry intervals). | `1000` |
 | `retryOn` | You can retry on certain http status codes or have custom logic to decide whether to retry or not via a function. Make sure `retries > 0` otherwise it won't retry. | `[]` |
@@ -911,6 +912,16 @@ const options = {
   // Allows caching to persist after page refresh. Only supported in the Browser currently.
   persist: false,
 
+  // this would basically call `await response.json()`
+  // and set the `data` and `response.data` field to the output
+  responseType: 'json',
+  // OR can be an array. It's an array by default.
+  // We will try to get the `data` by attempting to extract
+  // it via these body interface methods, one by one in
+  // this order. We skip `formData` because it's mostly used
+  // for service workers.
+  responseType: ['json', 'text', 'blob', 'arrayBuffer'],
+
   // amount of times it should retry before erroring out
   retries: 3,
 
@@ -1008,7 +1019,7 @@ Todos
   - [ ] if calling `response.json()` and there is no response yet
 - [ ] tests
   - [ ] tests for SSR
-  - [ ] tests for FormData (can also do it for react-native at same time. [see here](https://stackoverflow.com/questions/45842088/react-native-mocking-formdata-in-unit-tests))
+  - [ ] tests for react native [see here](https://stackoverflow.com/questions/45842088/react-native-mocking-formdata-in-unit-tests)
   - [ ] tests for GraphQL hooks `useMutation` + `useQuery`
   - [ ] tests for stale `response` see this [PR](https://github.com/ava/use-http/pull/119/files)
   - [ ] tests to make sure `response.formData()` and some of the other http `response methods` work properly
@@ -1034,12 +1045,6 @@ Todos
       // to overwrite those of `useFetch` for
       // `useMutation` and `useQuery`
     },
-    responseType: 'json', // similar to axios
-    // OR can be an array. We will try to get the `data`
-    // by attempting to extract it via these body interface
-    // methods, one by one in this order
-    // we skip `formData` because it's mostly used for service workers
-    responseType: ['json', 'text', 'blob', 'arrayBuffer'],
     // by default this is true, but if set to false
     // then we default to the responseType array of trying 'json' first, then 'text', etc.
     // hopefully I get some answers on here: https://bit.ly/3afPlJS

docs/README.md

@@ -52,7 +52,7 @@ Features
 
 - SSR (server side rendering) support
 - TypeScript support
-- 1 dependency ([use-ssr](https://github.com/alex-cory/use-ssr))
+- 2 dependencies ([use-ssr](https://github.com/alex-cory/use-ssr), [urs](https://github.com/alex-cory/urs))
 - GraphQL support (queries + mutations)
 - Provider to set default `url` and `options`
 - Request/response interceptors <!--https://github.com/alex-cory/use-http#user-content-interceptors-->
@@ -805,6 +805,7 @@ This is exactly what you would pass to the normal js `fetch`, with a little extr
 | `onTimeout` | Called when the request times out. | empty function |
 | `path` | When using a global `url` set in the `Provider`, this is useful for adding onto it       | `''` |
 | `persist` | Persists data for the duration of `cacheLife`. If `cacheLife` is not set it defaults to 24h. Currently only available in Browser. | `false` |
+| `responseType` | This will determine how the `data` field is set. If you put `json` then it will try to parse it as JSON. If you set it as an array, it will attempt to parse the `response` in the order of the types you put in the array. Read about why we don't put `formData` in the defaults [in the yellow Note part here](https://developer.mozilla.org/en-US/docs/Web/API/Body/formData).  | `['json', 'text', 'blob', 'readableStream']` |
 | `perPage` | Stops making more requests if there is no more data to fetch. (i.e. if we have 25 todos, and the perPage is 10, after fetching 2 times, we will have 20 todos. The last 5 tells us we don't have any more to fetch because it's less than 10) For pagination. | `0` |
 | `retries` | When a request fails or times out, retry the request this many times. By default it will not retry.    | `0` |
 | `retryDelay` | You can retry with certain intervals i.e. 30 seconds `30000` or with custom logic (i.e. to increase retry intervals). | `1000` |
@@ -862,6 +863,16 @@ const options = {
   // Allows caching to persist after page refresh. Only supported in the Browser currently.
   persist: false,
 
+  // this would basically call `await response.json()`
+  // and set the `data` and `response.data` field to the output
+  responseType: 'json',
+  // OR can be an array. It's an array by default.
+  // We will try to get the `data` by attempting to extract
+  // it via these body interface methods, one by one in
+  // this order. We skip `formData` because it's mostly used
+  // for service workers.
+  responseType: ['json', 'text', 'blob', 'arrayBuffer'],
+
   // amount of times it should retry before erroring out
   retries: 3,
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-http",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "homepage": "https://use-http.com",
   "main": "dist/index.js",
   "license": "MIT",
@@ -9,6 +9,7 @@
     "url": "https://github.com/alex-cory/use-http.git"
   },
   "dependencies": {
+    "urs": "^0.0.4",
     "use-ssr": "^1.0.22"
   },
   "peerDependencies": {

src/__tests__/useFetch.test.tsx

@@ -132,6 +132,42 @@ describe('useFetch - BROWSER - basic functionality', (): void => {
   })
 })
 
+describe('useFetch - responseType', (): void => {
+  afterEach((): void => {
+    cleanup()
+    fetch.resetMocks()
+  })
+
+  it('should fail to process a text response with responseType: `json`', async (): Promise<void> => {
+    cleanup()
+    fetch.resetMocks()
+    fetch.mockResponseOnce('Alex Cory')
+    const { result, waitForNextUpdate } = renderHook(
+      () => useFetch('a-fake-url', { data: '', responseType: 'json' }, []), // onMount === true
+    )
+    expect(result.current.data).toEqual('')
+    expect(result.current.loading).toBe(true)
+    await waitForNextUpdate()
+    expect(result.current.loading).toBe(false)
+    expect(result.current.error.name).toBe('FetchError')
+  })
+
+  it('should process .text() with default array responseType', async (): Promise<void> => {
+    cleanup()
+    fetch.resetMocks()
+    const expectedString = 'Alex Cory'
+    fetch.mockResponseOnce(JSON.stringify(expectedString))
+    const { result, waitForNextUpdate } = renderHook(
+      () => useFetch('a-fake-url', { data: '' }, []), // onMount === true
+    )
+    expect(result.current.data).toEqual('')
+    expect(result.current.loading).toBe(true)
+    await waitForNextUpdate()
+    expect(result.current.loading).toBe(false)
+    expect(result.current.data).toBe(expectedString)
+  })
+})
+
 describe('useFetch - BROWSER - with <Provider />', (): void => {
   const expected = {
     name: 'Alex Cory',
@@ -151,7 +187,7 @@ describe('useFetch - BROWSER - with <Provider />', (): void => {
     fetch.mockResponseOnce(JSON.stringify(expected))
   })
 
-  it('should work correctly: useFetch({ onMount: true, data: [] })', async (): Promise<void> => {
+  it('should work correctly: useFetch({ data: [] }, [])', async (): Promise<void> => {
     const { result, waitForNextUpdate } = renderHook(
       () => useFetch({ data: {} }, []), // onMount === true
       { wrapper }

src/defaults.ts

@@ -13,6 +13,7 @@ export const useFetchArgsDefaults: UseFetchArgsReturn = {
     path: '',
     perPage: 0,
     persist: false,
+    responseType: ['json', 'text', 'blob', 'arrayBuffer'],
     retries: 0,
     retryDelay: 1000,
     retryOn: [],

src/types.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react'
+import { FunctionKeys } from 'utility-types'
 
 export enum HTTPMethod {
   DELETE = 'DELETE',
@@ -95,7 +96,7 @@ export type RouteAndBodyOnly = (
 ) => Promise<any>
 
 export type RouteOrBody = string | BodyInit | object
-export type Body = BodyInit | object
+export type UFBody = BodyInit | object
 export type RetryOpts = { attempt: number, error?: Error, response?: Response }
 
 export type NoArgs = () => Promise<any>
@@ -184,6 +185,7 @@ export interface CustomOptions {
   path?: string
   persist?: boolean
   perPage?: number
+  responseType?: ResponseType
   retries?: number
   retryOn?: RetryOn
   retryDelay?: RetryDelay
@@ -206,6 +208,9 @@ export type OverwriteGlobalOptions = (options: Options) => Options
 export type RetryOn = (<TData = any>({ attempt, error, response }: RetryOpts) => Promise<boolean>) | number[]
 export type RetryDelay = (<TData = any>({ attempt, error, response }: RetryOpts) => number) | number
 
+export type BodyInterfaceMethods = Exclude<FunctionKeys<Body>, 'body' | 'bodyUsed' | 'formData'>
+export type ResponseType = BodyInterfaceMethods | BodyInterfaceMethods[]
+
 export type UseFetchArgsReturn = {
   customOptions: {
     cacheLife: number
@@ -217,6 +222,7 @@ export type UseFetchArgsReturn = {
     path: string
     perPage: number
     persist: boolean
+    responseType: ResponseType
     retries: number
     retryDelay: RetryDelay
     retryOn: RetryOn | undefined

src/useFetch.ts

@@ -1,5 +1,6 @@
-import { useEffect, useState, useCallback, useRef, useReducer, useMemo } from 'react'
+import { useEffect, useCallback, useRef, useReducer, useMemo } from 'react'
 import useSSR from 'use-ssr'
+import useRefState from 'urs'
 import {
   HTTPMethod,
   UseFetch,
@@ -13,7 +14,7 @@ import {
   FetchData,
   NoArgs,
   RouteOrBody,
-  Body,
+  UFBody,
   RetryOpts
 } from './types'
 import useFetchArgs from './useFetchArgs'
@@ -36,6 +37,7 @@ function useFetch<TData = any>(...args: UseFetchArgs): UseFetch<TData> {
     path,
     perPage,
     persist,
+    responseType,
     retries,
     retryDelay,
     retryOn,
@@ -59,18 +61,12 @@ function useFetch<TData = any>(...args: UseFetchArgs): UseFetch<TData> {
   const suspender = useRef<Promise<any>>()
   const mounted = useRef(false)
 
-  const loading = useRef(defaults.loading)
-  const setLoadingState = useState(defaults.loading)[1]
-  const setLoading = (v: boolean) => {
-    if (!mounted.current) return
-    loading.current = v
-    setLoadingState(v)
-  }
+  const [loading, setLoading] = useRefState(defaults.loading)
   const forceUpdate = useReducer(() => ({}), [])[1]
 
   const makeFetch = useDeepCallback((method: HTTPMethod): FetchData => {
 
-    const doFetch = async (routeOrBody?: RouteOrBody, body?: Body): Promise<any> => {
+    const doFetch = async (routeOrBody?: RouteOrBody, body?: UFBody): Promise<any> => {
       if (isServer) return // for now, we don't do anything on the server
       controller.current = new AbortController()
       controller.current.signal.onabort = onAbort
@@ -94,7 +90,7 @@ function useFetch<TData = any>(...args: UseFetchArgs): UseFetch<TData> {
       if (response.isCached && cachePolicy === CACHE_FIRST) {
         try {
           res.current = response.cached as Res<TData>
-          const theData = await tryGetData(response.cached, defaults.data)
+          const theData = await tryGetData(response.cached, defaults.data, responseType)
           res.current.data = theData
           res.current = interceptors.response ? await interceptors.response(res.current) : res.current
           invariant('data' in res.current, 'You must have `data` field on the Response returned from your `interceptors.response`')
@@ -125,7 +121,7 @@ function useFetch<TData = any>(...args: UseFetchArgs): UseFetch<TData> {
         newRes = await fetch(url, options)
         res.current = newRes.clone()
 
-        newData = await tryGetData(newRes, defaults.data)
+        newData = await tryGetData(newRes, defaults.data, responseType)
         res.current.data = onNewData(data.current, newData)
 
         res.current = interceptors.response ? await interceptors.response(res.current) : res.current
@@ -182,7 +178,7 @@ function useFetch<TData = any>(...args: UseFetchArgs): UseFetch<TData> {
       return data.current
     } // end of doFetch()
 
-    const retry = async (opts: RetryOpts, routeOrBody?: RouteOrBody, body?: Body) => {
+    const retry = async (opts: RetryOpts, routeOrBody?: RouteOrBody, body?: UFBody) => {
       const delay = (isFunction(retryDelay) ? (retryDelay as Function)(opts) : retryDelay) as number
       if (!(Number.isInteger(delay) && delay >= 0)) {
         console.error('retryDelay must be a number >= 0! If you\'re using it as a function, it must also return a number >= 0.')

src/useFetchArgs.ts

@@ -1,4 +1,4 @@
-import { OptionsMaybeURL, NoUrlOptions, CachePolicies, Interceptors, OverwriteGlobalOptions, Options, RetryOn, RetryDelay, UseFetchArgsReturn } from './types'
+import { OptionsMaybeURL, NoUrlOptions, CachePolicies, Interceptors, OverwriteGlobalOptions, Options, RetryOn, RetryDelay, UseFetchArgsReturn, ResponseType } from './types'
 import { isString, isObject, invariant, pullOutRequestInit, isFunction, isPositiveNumber } from './utils'
 import { useContext, useMemo } from 'react'
 import FetchContext from './FetchContext'
@@ -80,6 +80,7 @@ export default function useFetchArgs(
   invariant(isValidRetryOn, '`retryOn` must be an array of positive numbers or a function returning a boolean.')
   const retryDelay = useField<RetryDelay>('retryDelay', urlOrOptions, optionsNoURLs)
   invariant(isFunction(retryDelay) || Number.isInteger(retryDelay as number) && retryDelay >= 0, '`retryDelay` must be a positive number or a function returning a positive number.')
+  const responseType = useField<ResponseType>('responseType', urlOrOptions, optionsNoURLs)
 
   const loading = useMemo((): boolean => {
     if (isObject(urlOrOptions)) return !!urlOrOptions.loading || Array.isArray(dependencies)
@@ -125,21 +126,22 @@ export default function useFetchArgs(
 
   return {
     customOptions: {
-      url,
-      path,
+      cacheLife,
+      cachePolicy,
       interceptors,
-      timeout,
-      retries,
-      persist,
       onAbort,
-      onTimeout,
       onNewData,
+      onTimeout,
+      path,
+      persist,
       perPage,
-      cachePolicy,
-      cacheLife,
-      suspense,
+      responseType,
+      retries,
+      retryDelay,
       retryOn,
-      retryDelay
+      suspense,
+      timeout,
+      url,
     },
     requestInit,
     defaults: {

src/utils.ts

@@ -1,6 +1,6 @@
 import { useMemo, useEffect, MutableRefObject, useRef, useCallback, DependencyList } from 'react'
 import useSSR from 'use-ssr'
-import { RequestInitJSON, OptionsMaybeURL, Res, HTTPMethod } from './types'
+import { RequestInitJSON, OptionsMaybeURL, Res, HTTPMethod, ResponseType } from './types'
 import { FunctionKeys, NonFunctionKeys } from 'utility-types'
 
 /**
@@ -144,18 +144,22 @@ export const isBrowser = device === Browser
 export const isServer = device === Server
 export const isNative = device === Native
 
-export const tryGetData = async (res: Response | undefined, defaultData: any) => {
+export const tryGetData = async (res: Response | undefined, defaultData: any, responseType: ResponseType) => {
   if (typeof res === 'undefined') throw Error('Response cannot be undefined... 😵')
-  const response = res.clone()
-  let data
+  if (typeof responseType === 'undefined') throw Error('responseType cannot be undefined... 😵')
+  const types = (Array.isArray(responseType) ? responseType : [responseType]) as ResponseType
+  if (types[0] == null) throw Error('could not parse data from response 😵')
+  const data = res.ok ? await tryRetry(res, types) : undefined
+  return !isEmpty(defaultData) && isEmpty(data) ? defaultData : data
+}
+
+const tryRetry = async <T = any>(res: Response, types: ResponseType): Promise<T> => {
   try {
-    data = await response.json()
-  } catch (er) {
-    try {
-      data = (await response.text()) as any // FIXME: should not be `any` type
-    } catch (er) {}
+    return (res.clone() as any)[types[0]]()
+  } catch (error) {
+    if (types.length === 1) throw error
+    return tryRetry(res.clone(), (types as any).slice(1))
   }
-  return !isEmpty(defaultData) && isEmpty(data) ? defaultData : data
 }
 
 /**

yarn.lock

@@ -4561,6 +4561,11 @@ urix@^0.1.0:
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
   integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
 
+urs@^0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/urs/-/urs-0.0.4.tgz#d559d660f2a468e0bb116e0b7b505af57cb59ae4"
+  integrity sha512-+QflFOKa9DmjWclPB2audGCV83uWUnTXHOxLPQyu7XXcaY9yQ4+Tb3UEm8m4N7abJ0kJUCUAQBpFlq6mx80j9g==
+
 use-ssr@^1.0.22:
   version "1.0.22"
   resolved "https://registry.yarnpkg.com/use-ssr/-/use-ssr-1.0.22.tgz#a43c2587b1907fabda61c6542b80542c619228fe"