ApolloQuery

Props

Name	Type	Default	Description
query (required)	TypedDocumentNode<TData, TVariables>		The query document.
variables	TVariables | undefined		Variables for the query.
disabled	boolean | undefined	false	Skip execution until a condition is met.
fetchPolicy	useQuery.Options<TData, TVariables>["fetchPolicy"] | undefined		How the query reads from and writes to the cache.
pollInterval	number | undefined		Refetch every N milliseconds.
debounce	number | undefined		Delay variable updates (ms). loading covers the window.
throttle	number | undefined		Throttle variable updates (ms). loading covers the window.
keepPreviousResult	boolean | undefined		Keep the previous result on screen while new variables are in flight. Off by default, as in useQuery. Opt in for search and pagination, where clearing the list on every change flickers.
clientId	string | undefined		Name of the client to use, from the provided ApolloClients map.
empty	((data: TData) => boolean) | undefined		Decides whether a result counts as empty, selecting the #empty slot. Without it #empty is never used, so #data handles the empty case itself.
options	useQuery.Options<TData, TVariables> | undefined		Escape hatch for any other useQuery option.

Events

Name	Payload
result	[data: TData]
completeResult	[data: TData]
partialResult	[data: TData]
streamingResult	[data: TData]
error	[error: ErrorLike]
nextState	[state: useQuery.Current<TData, "empty" | "complete" | "streaming" | "partial">]

Slots

#data

Opinionated mode. Providing this slot selects it, and data is never undefined.

Slot prop	Type
data	TData
error	ErrorLike | undefined
isPreviousResult	boolean
loading	boolean
pending	boolean
refetch	(variables?: TVariables | undefined) => Promise<RenameKey<ApolloClient.QueryResult<TData>, "data", "result"> | undefined>
fetchMore	<TFetchData = TData, TFetchVars extends OperationVariables = TVariables>(options: ObservableQuery.FetchMoreOptions<TData, TVariables, TFetchData, TFetchVars>) => Promise<RenameKey<ApolloClient.QueryResult<TFetchData>, "data", "result">> | undefined

#loading

Shown while the first result is loading. Opinionated mode only.

No slot props.

#error

Shown when the query failed and there is nothing to display. Opinionated mode only.

Slot prop	Type
error	ErrorLike
refetch	(variables?: TVariables | undefined) => Promise<RenameKey<ApolloClient.QueryResult<TData>, "data", "result"> | undefined>

#empty

Shown when the empty prop returns true, and as the last branch when the query settles with nothing to show. Without the empty prop, #data owns the empty result.

No slot props.

#default

Raw mode. Receives the flattened query state and its methods.

Rendered in both modes, so nested renderless children still mount.

Receives useQuery.Current<MaybeMasked<TData>> & Pick<Query, 'refetch' \| 'fetchMore' \| 'updateQuery' \| 'subscribeToMore' \| 'start' \| 'stop' \| 'restart'>.

Every field of useQuery.Current is present, so resultState narrows result here exactly as it does in script.

Exposed

A template ref receives the full useQuery.Result surface, with refs unwrapped.

<template>
  <ApolloQuery ref="apollo" ... />
</template>