useQueryHandle

Like useQuery, but returns a full DocumentHandle with methods for refetching and pagination.

import { graphql, useQueryHandle } from '$houdini'

export function ShowList() {
  const { data, loadNext, loadNextPending, pageInfo, fetch } = useQueryHandle(
    graphql(`
      query AllShows {
        shows @paginate(limit: 10) {
          id
          title
        }
      }
    `)
  )

  return (
    <>
      {data.shows.map((show) => <div key={show.id}>{show.title}</div>)}
      {pageInfo?.hasNextPage && (
        <button onClick={() => loadNext(10)} disabled={loadNextPending}>
          Load more
        </button>
      )}
      <button onClick={() => fetch()}>Refresh</button>
    </>
  )
}

Signature

function useQueryHandle(document, variables?, config?): DocumentHandle

UseQueryConfig

Option	Type	Description
policy	CachePolicy	Override the cache policy for this query
metadata	App.Metadata	Passed through to client plugins
fetchKey	any	Change this value to force a refetch

DocumentHandle

Field	Type	Description
data	query data	The current result
fetching	boolean	True while a network request is in flight
errors	GraphQLError[] | null	Any errors from the last response
partial	boolean	True if the result was served partially from cache
variables	object	The variables used for the current result
fetch	function	Trigger a refetch, optionally with new variables
loadNext	function	Load the next page (cursor or offset pagination)
loadNextPending	boolean	True while loadNext is in flight
loadPrevious	function	Load the previous page (cursor pagination only)
loadPreviousPending	boolean	True while loadPrevious is in flight
pageInfo	PageInfo	Cursor pagination metadata

Pagination fields are only present when the query uses @paginate.