From 1dc4186756e258a6344653848dd8430fed364dd0 Mon Sep 17 00:00:00 2001 From: Arnaud Date: Mon, 15 Nov 2021 14:09:00 +0100 Subject: [PATCH] docs(cancel): add graphql-request example (#2948) --- docs/src/pages/guides/query-cancellation.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) 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.