Skip to content

Mirrors the functionality of Apollo client's useQuery hook, but with a "query" being any async function rather than GQL statement.

Notifications You must be signed in to change notification settings

penx/use-async-query

Repository files navigation

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.

codecov

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:

  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:

If you don't want to use a hook:

About

Mirrors the functionality of Apollo client's useQuery hook, but with a "query" being any async function rather than GQL statement.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published