Javascript
Apollo GraphQL Client – Abort pending requests
September 14, 2020
0
, , ,
apollo graphQL
GraphQL + Apollo Client + ReactJS

Quick intro about Apollo GraphQL

Apollo is the industry-standard GraphQL implementation, providing the data graph layer that connects modern apps to the cloud.

Apollo GraphQL

In this tutorial we will understand the integration of AbortController, a JavaScript API with Apollo GraphQL Client using a fullstack ReactJs sample project.

Motivation for this post

It all started with a use case to prevent client from making a repeated request for the same GraphQL mutation query.

All the code inspired in this blog post is from a GitHub issue thread (Read more for interesting discussion …)

With that intro, lets understand how the solution is engineered for this topic.

Libraries used:

  • UUIDUsed to create unique request tracker ID and prevent namespace collision for multiple request from same component.
  • ReactJSNo intro needed i guess?
  • Apollo GraphQLFollow the link to know more..

Source code

All the code cited in this blogpost is documented in a Github repository (full POC source code) by forking the react project from the Apollo GraphQL fullstack repo.

Code walkthrough

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) 
}

Step – 3:

Finally wiring all the middlewares and setup it up as funnel layers using from API of Apollo GraphQL client and set queryDeduplication to false.

const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
    cache,
    link: from([ authMiddleware, cancelRequestLink, httpLink ]),
    queryDeduplication: 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 stored it 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.

How to run the demo?

Follow the steps stated in readme file from the Github repo for installation.

Code modifications done for demoing

I have intentionally introduced a response delay of 5000ms in Login API (server code) to make this POC work.

Click repeatedly on login button and you can see the previous request getting cancelled in the Chrome – Developer console > Network.

See the demo video below

Thank you. If you have come to the end of this blog, please leave a comment below and share this blog in your social feed.

Nirus

 

About author

Ωirus

Twitter : @N1RUS | Slack : Nirus | StackOverflow : Nirus

storybook

Storybook.js custom Webpack setup for SCSS / SASS

What is Storybook (Quick one!) ? Storybook is an o...

Read more

Reverse engineering Popunder.js – Chrome

Reverse engineering Popunder Javascript library on...

Read more

There are 0 comments

Leave a Reply

Your email address will not be published. Required fields are marked *