Library of additional hooks and wrappers for Apollo Client
npm install 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.
Using Yarn:
``bash
$ yarn add apollo-hooks-extended
Using Npm:
`bash
$ npm install apollo-hooks-extendedor
$ npm i apollo-hooks-extended
`Features
$3
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:`typescript
import {useResettableMutation} from 'apollo-hooks-extended';
// ...
const [performMutation, {data, loading, error, reset}] = useResettableMutation(query, {
client: clientInstance
});
`or via the context API:
`tsx
import {useResettableMutation} from 'apollo-hooks-extended';
import {ApolloProvider} from '@apollo/client';function App() {
return (
);
}
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 catchIt is recommended to add the error handler to the
Promise returned when calling the mutation.$3
_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.`tsx
import {IRefreshTracker, useAutoRefreshQuery} from 'apollo-hooks-extended';function GetTodos({refresh}: {refresh: IRefreshTracker}) {
const {data, loading, error} = useAutoRefreshQuery(queryStatus, {client: authClient, refresh});
return (
Data: {JSON.stringify(data)}
Loading: {loading}
Error: {error}
);
}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 (
);
}
``