Apollo Client - useSuspenseQuery

How to use

1$ npm install use-suspense-query

To use hook in your app you have to provide apollo client via. SuspenseQueryProvider i.e:

1import { SuspenseQueryProvider } from 'use-suspense-query';
2
3const apolloClient = new ApolloClient({
4  link,
5  cache
6});
7
8export function App() {
9  return (
10    <SuspenseQueryProvider client={apolloClient}>
11        <div>
12          <OtherComponent />
13        </div>
14    </SuspenseQueryProvider>
15  );
16}

Now you're able to use hook in your app. Example usage:

1import { qgl } from '@apollo/client';
2import { useSuspenseQuery } from 'use-suspense-query';
3
4const myQuery = gql`
5  query getSth($id: ID!) {
6    data(id: $id) {
7      sth
8    }
9  }
10`
11
12function DataComponent() {
13  const data = useSuspenseQuery(myQuery, {
14    variables: {
15      id: '1234'
16    }
17  });
18
19  return (<div>display {data} here</div>);
20}
21
22export function App() {
23  return (
24    <Suspense fallback={...YourFallbackComponent}>
25      <DataComponent />
26    </Suspense>
27  )
28}

Hook API

1useSuspenseQuery(query: GraphqlQuery, options: Options): Response of ApolloClient.query()

Hook Options

Option	Description	Type
variables	query variables	Object
fetchPolicy	fetch policy option passing to ApolloClient fetchPolicy field	String
uniqueKey	In default that key is generated based on variables and query, but to be sure that your request is totally unique, you should pass this field with some unique value - recommended to add uniqueKey!	String