ReactFoo Delhi

We are building a single GraphQL endpoint for Cleartrip to remove the dependency of the react client with the Rest API. This will avoid the unnecessary over fetching of verbose data and manipulation on the client. It will reduce the network payload, making the react PWA client cleaner and faster (3 → 0.2s document load) and making the life of Front end developer much easier.

Outline

We migrated from old legacy code to React Progressive Web App for Cleartrip hotels but the page load time was still significantly high. Problems were two-fold.

First Problem.

We were doing multiple API calls and fetching extra data not required by mobile as the API is common across the website and mobile. We decided to discuss with API team to check what could be done about this. We hit a roadblock as the turnaround time and maintenance effort for creating a separate version of API for PWA was huge and not feasible.

Second Problem.

The data received was from different API calls and verbose in nature because of which the client ended up in calculating the derived data required to render fields. For example - the logic to filter and sort the data was implemented on the client which was creating unnecessary overhead on the browser.

Solution.
GraphQL with Apollo client and Apollo server.

We created our own GraphQL endpoint whose source of truth will be all the current API’s needed to render hotels. This transformation layer will give the client only that derived data which is required. Not a single thing more or less.

No manipulation or formating required in client side , all fields given by GraphQL are the format that the client renderer requires.

The intended audience for this talk is anyone, React specialists or not.

I’ll start the talk by introducing the concept of GraphQL. Then explain how it can make the life of a frontend developer easier by not depending on API versioning system and getting exactly what they need. Then I will briefly explain the Apollo client and server wrapper around GraphQL and how to use it with React.
In the end I will talk about the implementation of the cursor based pagination using GraphQL which led to 3 → 0.2 s document load time in Cleartrip Hotels list page.

Requirements

A laptop and internet connection

Speaker bio

This talk is relevant because, the current API versioning and depreciation system makes life hard for frontend engineer and GraphQL can introduce a transparent transformation layer which decouples the client with the REST API system. This case study would help developers to implement this system in their current development cycle to increase performance and reduce the turnaround time from backend.

This talk will a case study from personal experience.

Links

• https://eeshtyagi.com
• https://docs.google.com/document/d/1QXDryH6_YNDV_2JoXnWRGahKypPnJm6wCLTM3HuUyEQ/edit?usp=sharing
• https://github.com/eeshdarthvader