@brainly/use-suspense-query

Apollo Client - useSuspenseQuery

How to use

$ npm install @brainly/use-suspense-query

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

import { SuspenseQueryProvider } from 'use-suspense-query';

const apolloClient = new ApolloClient({
  link,
  cache
});

export function App() {
  return (
    <SuspenseQueryProvider client={apolloClient}>
        <div>
          <OtherComponent />
        </div>
    </SuspenseQueryProvider>
  );
}

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

import { qgl } from '@apollo/client';
import { useSuspenseQuery } from 'use-suspense-query';

const myQuery = gql`
  query getSth($id: ID!) {
    data(id: $id) {
      sth
    }
  }
`

function DataComponent() {
  const data = useSuspenseQuery(myQuery, {
    variables: {
      id: '1234'
    }
  });

  return (<div>display {data} here</div>);
}

export function App() {
  return (
    <Suspense fallback={...YourFallbackComponent}>
      <DataComponent />
    </Suspense>
  )
}

Hook API

useSuspenseQuery(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