useBackgroundQuery

1 import { Suspense } from "react";
2 import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
3 import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
4 
5 const query = gql`
6   foo {
7     bar
8   }
9 `;
10 
11 const client = new ApolloClient({
12   link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
13   cache: new InMemoryCache(),
14 });
15 
16 function SuspenseFallback() {
17   return <div>Loading...</div>;
18 }
19 
20 function Child({ queryRef }) {
21   const { data } = useReadQuery(queryRef);
22 
23   return <div>{data.foo.bar}</div>;
24 }
25 
26 function Parent() {
27   const [queryRef] = useBackgroundQuery(query);
28 
29   return (
30     <Suspense fallback={<SuspenseFallback />}>
31       <Child queryRef={queryRef} />
32     </Suspense>
33   );
34 }
35 
36 function App() {
37   return (
38     <ApolloProvider client={client}>
39       <Parent />
40     </ApolloProvider>
41   );
42 }

1useBackgroundQuery<TData, TVariables>(
2  query: DocumentNode | TypedDocumentNode<TData, TVariables>,
3  options: SkipToken | useBackgroundQuery.Options<TVariables>
4): [
5            QueryRef<TData, TVariables> | undefined,
6            useBackgroundQuery.Result<TData, TVariables>
7        ]

1[
2  QueryRef<TData, TVariables> | undefined,
3  useBackgroundQuery.Result<TData, TVariables>,
4];