How Tokopedia-Lite use GraphQL
At Tokopedia, we implement a lot of smart technology to achieve customer satisfaction. GraphQL is one of the technologies we implemented to that end.
Before we explain about how we implemented it in Tokopedia, we’ll explain what GraphQL is. We have the following summary from GraphQL official website.
GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
Basically, GraphQL is a new paradigm provided by Facebook for fetching data from server to client. GraphQL can combine with existing REST API. GraphQL exists not to replace REST, but to solve problems that can’t be solved by REST.
Tokopedia-Lite is light version from tokopedia mobile site. In the beginning, tokopedia mobile site was built with Perl. To achieve customer satisfaction, we decided to revamp our mobile site, and rebuild it with ReactJS. Following is the Technology stack used by Tokopedia-Lite:
- GraphQL (We use Apollo for client and server)
*NB: Another article will explain more deep about Tokopedia-Lite
GraphQL — Tokopedia-Lite
At Tokopedia, we have multiple Tribes each having their own focus area. For example, Tribe Discovery focuses on helping the user easily find products in marketplace. Tribe Digital focuses on selling digital products like recharge (pulsa), train ticket, event ticket, etc. Therefore, in one page, we may need to call multiple different APIs from different teams.
If we look the image, at Home page Tokopedia-Lite, we need to make calls to 5 different API at the very least. If Tokopedia-Lite hadn’t used GraphQL, then there would be 5 round trip network between client and server and that would make our home page slow, and make the user wait too long to get our home page rendered completely. However, because we use GraphQL in Tokopedia-Lite, our client only needs one API call to server and the GraphQL server does the rest (do 5x API call to 5 different API). That makes Tokopedia Lite faster and more efficient.
In some cases, not all queries need to call other APIs to get data. In Tokopedia, we have API to provide data of product categories in our marketplace. Because this data is not frequently updated, so we decided to cache it in our GraphQL server.
Every query for mainCategoriesQueries will resolve with checking our cache first. If cached data exists, GraphQL will immediately return the value from cache. The question is, how do we do that? Actually we only use redis as our cache server