useReadQuery
Apollo Client API reference
For a detailed explanation of useReadQuery, see the fetching with Suspense reference.
Example
1 import { Suspense } from "react";
2 import { useBackgroundQuery, useReadQuery } from "@apollo/client";
3
4 function Parent() {
5 const [queryRef] = useBackgroundQuery(query);
6
7 return (
8 <Suspense fallback={<div>Loading...</div>}>
9 <Child queryRef={queryRef} />
10 </Suspense>
11 );
12 }
13
14 function Child({ queryRef }) {
15 const { data } = useReadQuery(queryRef);
16
17 return <div>{data.name}</div>;
18 }Signature
1useReadQuery<TData>(
2 queryRef: QueryRef<TData>
3): useReadQuery.Result<TData>Parameters
The QueryRef that was generated via useBackgroundQuery.
Result
An object containing the query result data, error, and network status.useReadQuery.Result<TData>Show/hide child attributes
DataValue.Complete<TData> | DataValue.Streaming<TData> | DataValue.Partial<TData> | undefinedAn object containing the result of your GraphQL query after it completes.
This value might be undefined if a query results in one or more errors (depending on the query's errorPolicy).
"complete" | "streaming" | "partial" | "empty"Describes the completeness of data.
empty: No data could be fulfilled from the cache or the result is incomplete.dataisundefined.partial: Some data could be fulfilled from the cache butdatais incomplete. This is only possible whenreturnPartialDataistrue.streaming:datais incomplete as a result of a deferred query and the result is still streaming in.complete:datais a fully satisfied query result fulfilled either from the cache or network.
ErrorLike | undefinedA single ErrorLike object describing the error that occurred during the latest query execution.
For more information, see Handling operation errors.
NetworkStatusA number indicating the current network state of the query's associated request. See possible values.
Used in conjunction with the notifyOnNetworkStatusChange option.