Library of additional hooks and wrappers for Apollo Client
MIT License
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:
$ yarn add apollo-hooks-extended
# or
$ yarn add apollo-hooks-extended
Using Npm:
$ npm install apollo-hooks-extended
# or
$ npm i apollo-hooks-extended
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);
// ...
}
The errors can be handled as follows:
error
property returned by the hookonError
callback in the hook optionscatch()
to the Promise
returned by the call to the mutation function,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.
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>
);
}