useAsyncQuery

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


Usage

``sh
npm i use-async-query
`

$3

`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 && }

}
`

API

$3

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

#### Options

| Name | Type | Description |
| ----------- | ----------- | ----------- |
| variables | Record | 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) => Promise> | 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. |

$3

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] 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:

- 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