v2.4.2

Feat: Suspense

improve suspense usage

v2.4.1

Feat: Suspense 🚀

Added support for Suspense.

Example:

import { Suspense } from 'react'
import { useFetch } from 'http-react'

function Profile() {
  const { data } = useFetch('/api/profile', {
    suspense: true // If we don't pass anything, this will work as a normal component would
  })

  return (
    <div>
      <p>Email: {data.email}</p>
    </div>
  )
}

export default function App() {
  return (
    <div>
      <h2>Welcome</h2>
      <Suspense fallback={<p>Loading profile...</p>}>
        <Profile />
      </Suspense>
    </div>
  )
}

v2.4.0

Feat: library name

Changed library name for a shorter one: http-react-fetcher --> http-react
Old library will not be deprecated (yet)

v2.3.9

Fix: cancelOnChange

Fixed cancelOnChange not revalidating

v2.3.8

Feats

Added more customization to queryProvider:

• per-query baseUrl, headers and graphqlPath
• Default baseUrl and graphqlPath in general queryProvider config

Example:

export const useQuery = queryProvider(queries, {
  defaults: {
    appInfo: {
      baseUrl: '/api', // This overwrites the 'baseUrl' below
      headers: { a: 'b' }, // These headers are added to the headers passed below and in any <FetcherConfig> root in the React tree
      variables: {}
    },
    characters: {
      value: {
        characters: {
          results: []
        }
      },
      variables: {
        page: 3
      }
    }
  },
  config: {
    baseUrl: 'https://rickandmortyapi.com',
    headers: {  Authorization: "Token etc" }
  }
})

v2.3.7

feat(queryProvider)

Added more customization to the queryProvider function:

• baseUrl
• headers
• cache

Example using storage (a wrapper around the localStorage global) from the atomic-state library:

import { storage } from 'atomic-state'
import { gql } from 'http-react-fetcher'


const charactersQuery = gql`
  query {
    characters {
      results {
        name
        status
        location {
          name
        }
      }
    }
  }
`

const queries = {
  charactersQuery
}


export const useQuery = queryProvider(queries, {
  defaults: {
    charactersQuery
  },
  config: {
    headers: { // This headers overwrite the headers from FetcherConfig but can be overwritten per-request
      Authorization: 'Token my-token' 
    }
    cache: storage,
    baseUrl: 'https://rickandmortyapi.com'
  }
})

The caching method can now can be configured per-request by passing the cache property when calling a useFetch hook or a hook returned from running queryProvider with the defined queries. This overwrites both the caching method passed in <FetcherConfig> and when creating a graphql client hook with queryProvider

Using the client above in our app and overwriting the cache method:

import { defaultCache } from 'http-react-fetcher'

export default function Page() {
  const { data, config } = useQuery('charactersQuery', {
    cache: defaultCache // We want to use the default in-memory cache only for this request
  })

  return (
    <main>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </main>
  )
}

v2.3.6

Improved the useError hook

v2.3.5

Fixed minor bugs in the onError and useError APIS

v2.3.4

Fixed minor bugs in the loading state when setting revalidateOnMount to false

v2.3.3

Feat

data, error and variables properties are available when using graphql requests