v2.3.2

updated static typing for queryProvider

v2.2.9

Feat

When creating a provider (which returns a custom React hook), that hook call's return type will match exactly with the id passed as the first argument

v2.2.8

Feat

By default, the data property is returned in the resolver when using graphql queries

v2.2.7

Feat

Improve typing when using graphql

v2.2.6

Feat: queryProvider 🚀

Added queryProvider function that accepts a dictionary with queries created with the gql function and returns a hook that is fully typed (using the static typing of the created queries).

Example:

import { gql, queryProvider } from 'http-react-fetcher'

/**
 * The characters result type
 */
export type CharactersResultType = {
  data: {
    characters: {
      results: {
        name: string
        status: string
        location: {
          name: string
        }
      }[]
    }
  }
}

// We add the type above to our characters' query
const charactersQuery = gql<CharactersResultType>`
  query {
    characters {
      results {
        name
        status
        location {
          name
        }
      }
    }
  }
`

// We create a dictionary with all our queries
const queries = {
  charactersQuery
}

// We create a hook that we can use across our app without the need to import a single query
// This also inherits all the config passed in the 'FetcherConfig' component and can be overwritten with the second argument.
const useQuery = queryProvider(queries)

export default function App() {
  // This is fully typed
  const { data } = useQuery('charactersQuery', {
    onResolve(data) {
      console.log(data)
    }
  })

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

v2.2.5

Fix

If revalidateOnMount is set to false, loading will be set to false if props haven't changed, and the error state will be preserved between renders unless props change or a request doesn't fail

v2.2.4

Feat

revalidateOnMount:

If false, revalidation will only happen when props passed to the useFetch change. For example, you may want to have a component that should fetch with useFetch only once during the application lifetime or when its props change but not when, for example, navigating between pages (web) or screens (React Native). This is very useful when you have components that should persist their state, like layouts. This is also a way of revalidating only when props change.

Note that the behaviour when props change is the same.

Example:

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

export default function Page() {
  const { data } = useFetcher('/test', {
    revalidateOnMount: false,
    default: {}
  })

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

That component will fetch data only once during the application lifetime (even when navigating between pages or screens), or when any the props passed to the useFetcher call changes.

v2.2.3

fix(cdn links)

v2.2.2

Improve typing when using gql

v2.2.1

Fix

• Prevent multiple calls of onResolve when unnecesary

Feat

• By default, graphql queries are deduplicated using the object returned when using gql (this can be overwritten)

This is very useful. For example:

import { gql, useGql, useResolve } from 'http-react-fetcher'

const charactersQuery = gql`
  query getCharacters($page: Int) {
    characters(page: $page) {
      results {
        name
        image
      }
    }
  }
`

const Data = () => {
   const { data } = useGql(charactersQuery, {
    variables: {
      page: 2
    }
  })
  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

const DataResolve = () => {
  useResolve(charactersQuery, data => {
    console.log('Data was fetched', data)
  })
  return null
}

export default function Page() {
  return (
    <>
      <DataResolve />
      <Data />
    </>
  )
}