apollo-hooks-extended
v1.0.1
Published
Library of additional hooks and wrappers for Apollo Client
Downloads
350
Maintainers
Readme
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 hookonError
callback in the hook options- Add a
catch()
to thePromise
returned by the call to the mutation function,
or useasync
/await
and call the mutation within atry 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>
);
}