Cómo Tokopedia-Lite usa GraphQL

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

En Tokopedia, implementamos una gran cantidad de tecnología inteligente para lograr la satisfacción del cliente. GraphQL es una de las tecnologías que implementamos para ese fin.

GraphQL

Antes de explicar cómo lo implementamos en Tokopedia, explicaremos qué es GraphQL. Tenemos el siguiente resumen del sitio web oficial de GraphQL.

https://graphql.org/
GraphQL es un lenguaje de consulta para API y un tiempo de ejecución para completar esas consultas con sus datos existentes. GraphQL proporciona una descripción completa y comprensible de los datos en su API, brinda a los clientes el poder de pedir exactamente lo que necesitan y nada más, facilita la evolución de las API a lo largo del tiempo y permite poderosas herramientas para desarrolladores.

Básicamente, GraphQL es un nuevo paradigma proporcionado por Facebook para obtener datos del servidor al cliente. GraphQL puede combinarse con la API REST existente. GraphQL existe no para reemplazar REST, sino para resolver problemas que REST no puede resolver.

GraphQL combinado con API existente

Tokopedia-Lite

Tokopedia-Lite es una versión ligera del sitio móvil de tokopedia. Al principio, el sitio móvil de tokopedia se creó con Perl. Para lograr la satisfacción del cliente, decidimos renovar nuestro sitio móvil y reconstruirlo con ReactJS. A continuación se muestra la pila de tecnología utilizada por Tokopedia-Lite:

  1. ReactJS
  2. Paquete web
  3. GraphQL (Utilizamos Apollo para cliente y servidor)
  4. EmotionJS
  5. Babel
  6. etc.

* NB: otro artículo explicará más en profundidad sobre Tokopedia-Lite

Tokopedia-Lite Journey

GraphQL - Tokopedia-Lite

En Tokopedia, tenemos varias tribus, cada una con su propia área de enfoque. Por ejemplo, Tribe Discovery se enfoca en ayudar al usuario a encontrar fácilmente productos en el mercado. Tribe Digital se enfoca en vender productos digitales como recarga (pulsa), boleto de tren, boleto de evento, etc. Por lo tanto, en una página, es posible que necesitemos llamar a múltiples API diferentes de diferentes equipos.

Arquitectura Tokopedia-Lite y GraphQL

Case de inicio

Inicio Tokopedia-Lite

Si miramos la imagen, en la página de inicio Tokopedia-Lite, debemos hacer llamadas a 5 API diferentes como mínimo. Si Tokopedia-Lite no hubiera usado GraphQL, entonces habría 5 redes de ida y vuelta entre el cliente y el servidor y eso haría que nuestra página de inicio fuera lenta, y que el usuario esperara demasiado para que nuestra página de inicio se renderizara por completo. Sin embargo, debido a que usamos GraphQL en Tokopedia-Lite, nuestro cliente solo necesita una llamada API al servidor y el servidor GraphQL hace el resto (hacer 5 llamadas API a 5 API diferentes). Eso hace que Tokopedia Lite sea más rápido y más eficiente.

Cache

En algunos casos, no todas las consultas necesitan llamar a otras API para obtener datos. En Tokopedia, tenemos API para proporcionar datos de categorías de productos en nuestro mercado. Debido a que estos datos no se actualizan con frecuencia, decidimos almacenarlos en caché en nuestro servidor GraphQL.

Cada consulta para mainCategoriesQueries se resolverá con la comprobación de nuestro caché primero. Si existen datos en caché, GraphQL devolverá inmediatamente el valor del caché. La pregunta es, ¿cómo hacemos eso? En realidad solo usamos redis como nuestro servidor de caché

RedisMecanismo de caché

Tenemos muchas historias increíbles y no contadas dentro de Tokopedia. Siempre estamos dispuestos a probar diferentes métodos para satisfacer a nuestros clientes. ¿Tiene alguna sugerencia para que lo llevemos al siguiente nivel? ¡Siéntase libre de escribir comentarios o puede unirse a nosotros! Por favor, consulte nuestra página de carreras para obtener más información.