diff --git a/docs/src/pages/guides/query-cancellation.md b/docs/src/pages/guides/query-cancellation.md index 4e228aa52c..2c00fe1625 100644 --- a/docs/src/pages/guides/query-cancellation.md +++ b/docs/src/pages/guides/query-cancellation.md @@ -97,6 +97,19 @@ const query = useQuery('todos', ({ signal }) => { }) ``` +## Using `graphql-request` + +An `AbortSignal` can be set in the `GraphQLClient` constructor. + +```js +const query = useQuery('todos', ({ signal }) => { + const client = new GraphQLClient(endpoint, { + signal, + }); + return client.request(query, variables) +}) +``` + ## Manual Cancellation You might want to cancel a query manually. For example, if the request takes a long time to finish, you can allow the user to click a cancel button to stop the request. To do this, you just need to call `queryClient.cancelQueries(key)`, which will cancel the query and revert it back to its previous state. If `promise.cancel` is available, or you have consumed the `signal` passed to the query function, React Query will additionally also cancel the Promise.