use-suspense-query v1.0.1

Apollo Client - useSuspenseQuery

How to use

$ npm install 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