Intro to GraphQL

1. Intro to GraphQL Ascend ↗ 2020
2. Application Programing Interface Simple Interface, 🤩 Consumers Complex Interface, 😢 Consumers Allows two applications to talk to each other
3. (Web) API Styles • RPC ◦ Call a function on another server ◦ getProductsForStore , placeOrder ◦ e.g. gRPC • REST ◦ Resources and What you can do with them ◦ Built on top of HTTP and (mostly) uses JSON ◦ GET /stores/1, GET /stores/1/products , POST /stores/1/orders
5. Product Feed Is this product enriched, has price and in stock? Pricing Which is the cheapest in stock variant and what is the price for the same? Loyalty Points Does any of this product’s variants provides Loyalty Points? How much? Cashback Campaigns Does any of this product’s variants provides Cashback? How much? Product Information Get Product Label to be displayed from data enriched via Akeneo Product Feed + Pricing Get Image of the cheapest Product Variant, which is in stock
6. API Endpoints used (Obfuscated) 1. /clusters/store/${STORE}/location 2. /product-feed/products/${CLUSTER} 3. /product-information/product/${PID} 4. /product-information/product/${PID} 5. /product-information/product/${PID} 6. /pricing/product/${PID}/cheapest 7. /pricing/product/${PID} 8. /cashback/campaigns/product/${PID} 9. /loyalty-points/campaigns/product/${PID} ... 10. /promotions/... 11. /suppliers/...
7. What is BFF? A layer in front of existing services which is aware about how to fetch and aggregate data specifically required for a Front-end Application Can allow Back-end to evolve independently of Front-ends, hiding the complexity and implementation details of Back-end https://samnewman.io/patterns/architectural/bff/
8. What is GraphQL? Open-source Query Language Specification for API Provides Typed Definition of Data and their Relation Its implementation can act as a BFF for Client Applications providing access to authorized data, across different technologies
9. query products { pid title defaultVariant { pvid image pricing { unitPrice { value currencyCode } } loyalty { points } cashback { amount { value currencyCode } } } } POST /graphql
10. Product Feed Is this product enriched, has price and in stock? Pricing Which is the cheapest in stock variant and what is the price for the same? Loyalty Points Does any of this product’s variants provides Loyalty Points? How much? Cashback Campaigns Does any of this product’s variants provides Cashback? How much? Product Information Get Product Label to be displayed from data enriched via Akeneo Product Feed + Pricing Get Image of the cheapest Product Variant, which is in stock
11. query products { pid title defaultVariant { pvid image pricing { unitPrice { value currencyCode } } loyalty { points } cashback { amount { value currencyCode } } } } POST /graphql • /clusters • /product-feed • /product-information • /pricing • /product-information • /cashback • /loyalty-points
12. Client (e.g Mobile App / Web App) Product Feed Pricing Inventory Loyalty Points Cashback Client (e.g Mobile App / Web App) Product Feed Pricing Inventory Loyalty Points Cashback GraphQL Without BFF GraphQL With GraphQL ⚙
13. Client (e.g Mobile App / Web App) Product Feed Pricing Inventory Loyalty Points Cashback Client (e.g Mobile App / Web App) Product Feed Pricing Inventory Loyalty Points Cashback GraphQL Price Listing ❌ Price Mgmt. Without GraphQL With GraphQL
14. Client (e.g Mobile App / Web App) Product Feed Pricing Inventory Loyalty Points Cashback Client (e.g Mobile App / Web App) Product Feed Pricing Inventory Loyalty Points Cashback GraphQL Price Listing ❌ Price Mgmt. Promo Suppliers Without GraphQL With GraphQL
15. Elements of GraphQL Schema • Operations (Query / Mutations / Subscriptions) • Types ◦ What can be sent and requested using a GraphQL Operation ▪ Primitive, having a value ▪ Complex, having multiple fields (Complex or Primitive) • Resolvers ◦ How data will be prepared Schema allows Introspection of GraphQL API
16. Resolvers: 🪄 of GraphQL A resolver is a function that's responsible for populating the data for a single field in your schema.
17. query products { pid title defaultVariant { pvid image pricing { unitPrice { value currencyCode } } loyalty { points } cashback { amount { value currencyCode } } } } POST /graphql • /clusters • /product-feed • /product-information • /pricing • /product-information • /cashback • /loyalty-points
18. Demo: Resolvers
19. query products { pid title defaultVariant { pvid image pricing { unitPrice { value currencyCode } } } } POST /graphql • /clusters • /product-feed • /product-information • /pricing • /product-information • /cashback • /loyalty-points GraphQL automatically optimizes execution by NOT invoking APIs for Loyalty Points and Cashback, as data for them is not requested by the client
20. What is “Graph” in GraphQL?
21. Resolvers of a Product’s Variant Web App Mobile Apps
22. Demo: Resolvers for Graph
24. Trade-offs Caching of Data can be difficult as we have a single endpoint Resolver optimization needs to be taken care of Can prove difficult to find performance bottlenecks and cause of errors (but there is a solution!)
25. Demo: Apollo Studio for Insights
26. Any Questions⁉
27. Resources • GraphQL: The Documentary https://www.youtube.com/watch?v=783ccP__No8 • F8 2019: Building the New Facebook.com with React, GraphQL and Relay https://youtu.be/WxPtYJRjLL0?t=300 • React.js Conf 2015 - Data fetching for React applications at Facebook https://www.youtube.com/watch?v=9sc8Pyc51uU
28. Keep Hyking ↗