GraphQL: Mind Your Ps and QLs

Transcription

1

2 GraphQL: Mind Your Ps and QLs

3 Misha Kotov Sr. Product Cristian Partica MTS 1, Software

4 The Beginning

5 GraphQL Data query language developed internally by Facebook in 2012 Publicly released in 2015, rapidly growing Alternative to REST and ad-hoc webservice architectures Allows FE developers to define the structure of the data they want Avoids both the problems of over fetching as well as under fetching of data Request data structure = Response data structure

6 Putting Graph in GraphQL Business objects are represented as related nodes Traversing the graph:

7 Benefits Accomplish more in one API call Query across business objects Efficient payload size over the network Support for variables, fragments Strongly typed objects Schema Introspection Rich tooling Built in docs Built in deprecation

8 Fast Forward

9 Who uses GraphQL?

10 Storefront vs Admin GraphQL= API to pass data between back-end and front-end

11 GraphQL Powers Storefront Experiences Products query Product details page Category pages Search results CMS product widgets In checkout In wish list Categories query Navigation Breadcrumbs Sitemap Customer query My Account Addresses Profile info

12 Why GraphQL in Magento? Dev investment gets you more Lower platform TCO (total cost of ownership) Lower front-end and extension development costs Faster TTM (time to market) Enable agility and faster iterations Progressive Web Apps Headless implementations Mobile apps Custom front-ends

13 But I like REST! - someone, probably

14 REST still has its use!

15 but it was not designed exclusively for storefront

16 GraphQL vs REST using burgers Source:

17 GraphQL vs REST using pizza Source:

18 GraphQL vs REST using more pizza vs Source:

19 Technical Details

20 High level architecture Most of the implementation is located in the the Magento 2 framework vendor/magento/framework/graphql/* vendor/magento/framework/graphqlschemastitching/* Modules organization Main module that adds the /graphql area/endpoint vendor/magento/module-graph-ql/* Specialized modules vendor/magento/module-url-rewrite-graph-ql/* - vendor/magento/module-store-graph-ql/*..

21 Query Structure - Schema

22 Query Structure - Endpoint GraphQl has an unique endpoint In contrast REST API has a different endpoint for each type of operation All responses are HTTP 200 and errors are in the response body In contrast REST API has a different response for failed or successful operation as described in the HTTP protocol In GraphQl each operation/query goes to <URL>/graphql GraphQl endpoint is enabled by the Magento_GraphQl module All modules contribute to the schema through schema stitching

23 Query Structure Tools: GraphiQL

24 Technical decisions - Implementation GraphQl Spec Link: Magento 2 mostly follows the spec creating it s own definitions of the API Usage of webonyx graphql-php library Schema stitching framework capability Allows merging of multiple modules to merge their part of schema to the main schema Uses SDL (Schema Definition Language) files and not XML Allows caching of schema Can read dynamic data through readers such as EAV attributes

25 Technical decisions - Derivations What s different from the GraphQL spec in Magento 2 No cursor based pagination which are suitable mostly for infinite scroll UI Magento 2 UI has page based pagination where we still calculate total number of results if needed Usage of filters combined with full text search Responses are not structured as GraphQl edges and nodes Schema is dynamic because of dynamic attributes of each M2 installation Resolvers don t pass state through global context Resolvers do pass state from child to parent through result

26 Development Architecture

27 Development - Resolvers Not all fields need a resolver Each field with complex data can have a resolver A resolver can be interpreted or deferred as php closure Interface provided for all resolvers

28 Development Implement a resolver

29 Development Solving N+1 problem

30 Development Writing tests

31 Development Writing tests

32 Community Project

33 Community Project Snapshot Project page: Total stories/bugs created in backlog: 206 Total pull requests: 207 Total contributors: >15 Resources: devdocs.magento.com Feedback: magentocommeng.slack.com #graphql Every weekly demo available on YouTube (EngCom channel)

34 Current project status Completed Products Categories Customer URL resolution for products, categories, CMS pages In progress Mutations to support checkout, payments, shipping, My Account, etc Increased coverage for entities like products and categories Increased coverage for experiences like Checkout and My Account DevEx, framework, and performance improvements

35 Q&A

36