Aborting long-running Apollo Client queries in React component

Question

I'm using Apollo Client(3.7.17) with React to fetch data. I'm facing an issue where I have a long-running query, and if the user navigates away before the query completes, I want to abort the request to prevent unnecessary work and allow the user to interact with the UI immediately. I didn't find any option to do it with Apollo API.

How can I do it?

example:

  const [getData, { loading }] = useGetDataLazyQuery({ fetchPolicy: "no-cache" })

what I expect to have:

  const [getData, { loading, abort }] = useGetDataLazyQuery({ fetchPolicy: "no-cache" })

Answer 1

You can pass an AbortSignal via context.fetchOptions.signal into the query.

const [controller] = useState(new AbortController());
const [getData, { loading }] = useGetDataLazyQuery({
  fetchPolicy: "no-cache",
  context: { fetchOptions: { signal: controller.signal } },
});

// on navigating away, call
controller.abort()

That said, it's highly unlikely that closing the connection will actually stop the work happening on the server - you'll have to validate that.
If it's not the case, it might be better to let this query finish and populate the cache so you have the data available the next time you make the request.