stop pending requests with apollo client hooks

Question

It looks like its possible to cancel pending requests via client.stop() but the documentation is not showing us a solution when we use apollo client hooks where we have no client.

How to stop pending requests using apollo client hooks ?

Answer 1

Struggled for days and made a proof of concept that finally works.

I have explained the code below and here is my POC - Github source code.

---

Explaination:

Step – 1: Create a middleware that holds the logic to track and cancel duplicate request via ReactJS context API – cancelRequest.tsx (complete source code)

Step – 2: Generate namespace UUID and pass it using requestTrackerId via query context as below.

context:{ 
  requestTrackerId: uuidNameSpace('LOGIN', RequestNameSpace) 
}

Refer source code - Line 32

Step – 3: Finally, wiring all the middleware and setup it up as funnel layers using from API of Apollo GraphQL client and set queryDeduplication to false.

---

Mechanism of action:

When ever more than one request originates from the same mutation query, each query is tagged to its requestTrackerId which remains same to that particular query and different for other queries.

Using UUID library namespace is generated for each query (Read the code). With this ID the middleware associates each query to its namespace generated ID and stores in a cache object.

Subsequent incoming request are looked up using the cache object. If there’s an ongoing request which is not yet completed, it will be aborted immediately using AbortController javascript API and this request is replaced with new request.

Libraries used

• UUID – Used to create unique request tracker ID and prevent namespace collision for multiple request from same component.
• ReactJS – No intro needed i guess?
• Apollo GraphQL – Follow the link to know more..

Hope this answer helps. Happy coding