star4beam/apollo-hooks-extended

Library of additional hooks and wrappers for Apollo Client

Apollo Hooks Extended

Let's start with big kudos for the authors and maintainers of Apollo, fantastic work :)

This package is a complementary library providing additional features for @apollo/client.

Installation

Using Yarn:

$ yarn add apollo-hooks-extended

# or
$ yarn add apollo-hooks-extended

Using Npm:

$ npm install apollo-hooks-extended

# or
$ npm i apollo-hooks-extended

Features

Resettable Hook

It is not currently possible to reset the state returned by the useMutation hook.

useResettableMutation is a swap in replacement which wraps useMutation and provides a reset function.

As noted in the useMutation API, the apollo client should be either provided in the hook options:

import {useResettableMutation} from 'apollo-hooks-extended';
// ...
const [performMutation, {data, loading, error, reset}] = useResettableMutation(query, {
  client: clientInstance
});

or via the context API:

import {useResettableMutation} from 'apollo-hooks-extended';
import {ApolloProvider} from '@apollo/client';

function App() {
  return (
    <ApolloProvider client={clientInstance}>
      <MutationComp />
    </ApolloProvider>
  );
}

function MutationComp() {
  const [login, {data, loading, error, reset}] = useResettableMutation(query);
  // ...
}

Error handling

The errors can be handled as follows:

• error property returned by the hook
• onError callback in the hook options
• Add a catch() to the Promise returned by the call to the mutation function,
  or use async / await and call the mutation within a try catch

It is recommended to add the error handler to the Promise returned when calling the mutation.

Auto Refresh Query (beta)

since 0.2.0

This feature allows loading and triggering a refresh of the query with a simple timestamp. Based on the parameters provided, the query will either use the cache-first or the network-only fetch policy.

import {IRefreshTracker, useAutoRefreshQuery} from 'apollo-hooks-extended';

function GetTodos({refresh}: {refresh: IRefreshTracker}) {
  const {data, loading, error} = useAutoRefreshQuery(queryStatus, {client: authClient, refresh});

  return (
    <div>
      <div>
        Data: <pre>{JSON.stringify(data)}</pre>
      </div>
      <div>Loading: {loading}</div>
      <div>Error: {error}</div>
    </div>
  );
}

function RefreshExample() {
  // the timestamp set on hard and soft is compared to the timespamp of the last response.
  const [refresh, setRefresh] = useState({hard: 0, soft: 0}),
    triggerHardRefresh = useCallback(
      () => setRefresh((latestState) => ({...latestState, hard: Date.now()})),
      [setRefresh]
    ),
    triggerSoftRefresh = useCallback(
      () => setRefresh((latestState) => ({...latestState, soft: Date.now()})),
      [setRefresh]
    );

  return (
    <div>
      <button onClick={triggerHardRefresh}>Hard refresh</button>
      <button onClick={triggerSoftRefresh}>Soft refresh</button>
      <GetTodos refresh={refresh} />
    </div>
  );
}