Use-async-query NPM

useAsyncQuery

Mirrors the functionality of Apollo client's useQuery hook, but with a "query" being any async function of the format (variables: Record<string, any>) => any rather than a GQL statement.

Usage

npm i use-async-query

Example usage with Firestore

import firestore from '@firebase/firestore'
import { useQuery } from 'use-async-query'

import { Loading, Error, Results } from './components'

const myQuery = (variables) => firestore()
  .collection('myCollection')
  .where('example', '==', variables.example)
  .get()

const MyComponent = () => {
  const {loading, error, data} = useQuery(myQuery, { variables: { example: 'test' }})

  return <>
    {loading && <Loading />}
    {error && <Error error={error} />}
    {data && <Results data={data}>}
  </>
}

API

`useQuery(query, options)`

Name	Type	Description
query	`(variables?: TVariables) => Promise<TData>`	Any async function that takes a single variables argument.
options	`Record`	An options object, see below.

Options

Name	Type	Description
variables	`Record<string, any>`	The variables that are passed to the query function.
skip	`boolean`	If set to true, the query is not called for the current render.
onCompleted	`(data: TData) => void`	A function that's called when the query completes successfully.
onError	`(error: any) => void`	A function that's called when an error is thrown by the query.

Result

Name	Type	Description
data	`TData`	The return value from the latest query, once completed.
previousData	`TData`	The return value from the previous query.
refetch	`(variables?: Partial<TVariables>) => Promise<QueryResult<TData, TVariables>>`	Refetch data by calling the query again. Partial variables are added to variables set in the hook options.
loading	`boolean`	Returns `true` if the latest query has not completed.
error	`any`	The error response if the latest query returned an error.

`useLazyQuery(query, options)`

The API for useLazyQuery is identical to useQuery above, except that:

the query is not immediately executed
the result is a tuple [execute, queryResult] where
- execute is a function that runs the query
- queryResult is an object matching the useQuery result above

Alternatives

If you want to fetch data in a hook but don't care about the apollo-client API:

If you don't want to use a hook:

Lean on your router to fetch data for you, e.g. Remix's loader and the React Router equivalent (currently in beta)
Use React Suspense, e.g. react-suspense-fetch