https://www.bram.us/2017/06/27/full-stack-react-graphql-tutorial/

At Tokopedia, we implement a lot of smart technology to achieve customer satisfaction. GraphQL is one of the technologies we implemented to that end.

GraphQL

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.

https://graphql.org/

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.

GraphQL combined with Existing API

Tokopedia-Lite

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:

  1. ReactJS
  2. Webpack
  3. GraphQL (We use Apollo for client and server)
  4. EmotionJS
  5. Babel
  6. etc

*NB: Another article will explain more deep about Tokopedia-Lite

Tokopedia-Lite Journey

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.

Tokopedia-Lite & GraphQL Architecture

Home Case

Home Tokopedia-Lite

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.

Cache

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.

Query Category

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

Redis

Cache Mechanism

We have many amazing and untold stories inside Tokopedia. We are always willing to try different methods to satisfy our customers. Have any suggestion for us to take it to the next level? Feel free to write in comments or you can join us! Please check out our careers page for more information.