Apollo Client's useQuery API for any async function
npm install use-async-queryMirrors the functionality of
Apollo client's useQuery hook,
but with a "query" being any async function of the format(variables: Record rather than a GQL statement.

``sh`
npm i use-async-query
`ts
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 &&
{error &&
{data &&
>
}
`
| Name | Type | Description |
| ----------- | ----------- | ----------- |
| query | (variables?: TVariables) => Promise | Any async function that takes a single variables argument. |Record
| options | | An options object, see below. |
#### Options
| Name | Type | Description |
| ----------- | ----------- | ----------- |
| variables | Record | The variables that are passed to the query function. |boolean
| skip | | If set to true, the query is not called for the current render. |(data: TData) => void
| onCompleted | | A function that's called when the query completes successfully. |(error: any) => void
| onError | | 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. |TData
| previousData | | The return value from the previous query. |(variables?: Partial
| refetch | | Refetch data by calling the query again. Partial variables are added to variables set in the hook options. |boolean
| loading | | Returns true if the latest query has not completed. |any
| error | | The error response if the latest query returned an error. |
The API for useLazyQuery is identical to useQuery above, except that:
1. the query is not immediately executed
2. the result is a tuple [execute, queryResult] whereexecute
- is a function that runs the queryqueryResult` is an object matching the useQuery result above
-
If you want to fetch data in a hook but don't care about the apollo-client API:
- react-hooks-fetch
- react-query
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