Как Tokopedia-Lite използва GraphQL

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

В Tokopedia прилагаме много интелигентни технологии, за да постигнем удовлетвореност на клиентите. GraphQL е една от технологиите, които внедрихме за тази цел.

GraphQL

Преди да обясним как сме го внедрили в Tokopedia, ще обясним какво е GraphQL. Имаме следното резюме от официалния уебсайт на GraphQL.

https://graphql.org/
GraphQL е език за заявки за API и време за изпълнение на тези заявки със съществуващите ви данни. GraphQL предоставя пълно и разбираемо описание на данните във вашия API, дава възможност на клиентите да искат точно това, от което се нуждаят, и нищо повече, улеснява еволюцията на API с течение на времето и дава възможност за мощни инструменти за разработчици.

По принцип GraphQL е нова парадигма, предоставена от Facebook за получаване на данни от сървър към клиент. GraphQL може да се комбинира със съществуващ REST API. GraphQL съществува не за замяна на REST, а за решаване на проблеми, които не могат да бъдат решени от REST.

GraphQL комбиниран със съществуващ API

Tokopedia-Lite

Tokopedia-Lite е лека версия от мобилния сайт tokopedia. В началото е създаден мобилен сайт за токопедия с Perl. За да постигнем удовлетвореност на клиентите, решихме да обновим нашия мобилен сайт и да го възстановим с ReactJS. Следва стека от технологии, използван от Tokopedia-Lite:

  1. ReactJS
  2. WebPACK
  3. GraphQL (Ние използваме Apollo за клиент и сървър)
  4. EmotionJS
  5. Babel
  6. и т.н.

* NB: Друга статия ще обясни по-задълбочено за Tokopedia-Lite

Пътешествие по Токопедия-Лите

GraphQL - Tokopedia-Lite

В Токопедия имаме множество племена, всяко от които има собствена фокусна зона. Например Tribe Discovery се фокусира върху това да помогне на потребителя лесно да намира продукти на пазара. Tribe Digital се фокусира върху продажбата на цифрови продукти като презареждане (пулса), билет за влак, билет за събития и т.н. Ето защо в една страница може да се наложи да извикаме множество различни API-и от различни екипи.

Tokopedia-Lite & GraphQL Architecture

Случай за дома

Начало Токопедия-Лите

Ако погледнем изображението, в началната страница Tokopedia-Lite, трябва да се обаждаме най-малко на 5 различни API. Ако Tokopedia-Lite не беше използвал GraphQL, тогава ще има 5 двупосочна мрежа между клиент и сървър и това ще направи бавната ни страница бавна и ще накара потребителя да чака прекалено дълго, за да бъде напълно рендирана нашата начална страница. Въпреки това, тъй като ние използваме GraphQL в Tokopedia-Lite, нашият клиент се нуждае само от едно извикване на API към сървъра, а GraphQL сървърът прави останалото (направи 5x API повикване до 5 различни API). Това прави Tokopedia Lite по-бърза и по-ефективна.

скривалище

В някои случаи не всички заявки трябва да извикат други API, за да получат данни. В Tokopedia имаме API за предоставяне на данни за продуктови категории на нашия пазар. Тъй като тези данни не се актуализират често, затова решихме да ги кешираме в нашия GraphQL сървър.

Всяка заявка за mainCategoriesQueries ще разреши, като първо проверим кеша ни. Ако има кеширани данни, GraphQL веднага ще върне стойността от кеша. Въпросът е как да направим това? Всъщност ние използваме само redis като наш кеш сървър

RedisМеханизъм на кеша

В Токопедия имаме много невероятни и неразказани истории. Винаги сме готови да изпробваме различни методи, за да задоволим нашите клиенти. Имате ли някакво предложение да го пренесем на следващото ниво? Чувствайте се свободни да пишете в коментари или можете да се присъедините към нас! Моля, разгледайте нашата страница за кариера за повече информация.