![Page 1: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/1.jpg)
© 2018 Magento, Inc. Page | 1
GraphQL in Magento
Mind Your Ps and QLs
Mind your Ps and Qs is an expressionmeaning "mind
your manners", "mind your language", "be on your best behavior" or similar.
![Page 2: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/2.jpg)
© 2018 Magento, Inc. Page | 2
Cristian Partica
Magento 2 Core Software Engineer
Part of the 3 devs team that started GraphQl project in Magento
![Page 3: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/3.jpg)
© 2018 Magento, Inc. Page | 3
Agenda
© 2018 Magento, Inc. Page | 3
• What is GraphQL?
• Why does Magento need GraphQL?
• Implementation in Magento:
– Phase I: What’s done?
– Phase II: What’s next?
• How to add new coverage?
• How to contribute?
![Page 4: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/4.jpg)
© 2018 Magento, Inc. Page | 4© 2018 Magento, Inc. Page | 4
What is GraphQL?
![Page 5: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/5.jpg)
© 2018 Magento, Inc. Page | 5
Overview
• Query language
• Complete description of the data
• Empowers clients to ask for what they need
• Enables API evolution
What is GraphQL
• Has powered Facebook mobile apps since 2012
• Open sourced in 2015
• In active development and adoption phase
History
• Rich variety for JS servers and clients
• Other languages are in active development
Libraries & Tools
![Page 6: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/6.jpg)
© 2018 Magento, Inc. Page | 6© 2018 Magento, Inc. Page | 6
Why GraphQL?
![Page 7: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/7.jpg)
© 2018 Magento, Inc. Page | 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
Why should we use GraphQl
![Page 8: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/8.jpg)
© 2018 Magento, Inc. Page | 8
Use cases
• Headless integrations
• PWA (progressive web apps)
• Mobile app
• Custom front end
Where would we use it?
![Page 9: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/9.jpg)
Why invest in APIs?
![Page 10: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/10.jpg)
© 2018 Magento, Inc. Page | 10
Benefits of investing in APIs
• Support for virtually all external systems
• Ultimate platform flexibility
Business Agility
• Unlimited customization potential
• Easy light-weight platform consumption
Innovation Potential
• Minimized integration efforts
• Streamlined Magento implementations
• Reduced conflicts and maintenance
Lower Cost of Ownership
• Accelerated development
• Shorter learning curve
Faster Time to Market
![Page 11: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/11.jpg)
© 2018 Magento, Inc. Page | 11
![Page 12: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/12.jpg)
© 2018 Magento, Inc. Page | 12
XML RPC SOAP REST GraphQL
Web API evolution in Magento
![Page 13: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/13.jpg)
© 2018 Magento, Inc. Page | 13
The best web API type depends on the job
SOAP and XML RPC are outdated
REST or GraphQL
What is the best web API type?
![Page 14: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/14.jpg)
© 2018 Magento, Inc. Page | 14
GraphQL for API usersEfficiency when client decides what to fetch
• No over and under-fetching• Minimal number of calls
• Per object ACL
Schema introspection
• Query generation• Documentation
• Tools with better dev experience
Client-side performance
• Seamless caching• Automatic query batching
Partial success and exception handling
200 is returned with all responsesClient must look for errors in every response
![Page 15: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/15.jpg)
© 2018 Magento, Inc. Page | 15
DoS protection
•Query complexity and nesting
•Whitelisting
A lot of effort to properlycover the whole system
•No automatic coverage like with REST and SOAP
•Separate customizations required for GraphQL and Services
Consistency between queries
•Coverage is done by independent teams
Server-side caching
•Variable content for the same entities
•All queries are POST requests to a single endpoint
GraphQL for API implementors
![Page 16: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/16.jpg)
© 2018 Magento, Inc. Page | 16
GraphQL vs REST
Source: https://twitter.com/NikkitaFTW
The simple explanation:
…using burgers
![Page 17: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/17.jpg)
© 2018 Magento, Inc. Page | 17
GraphQL vs REST
Source: Source: https://twitter.com/peggyrayzis
For pizza lovers:
…using pizza
![Page 18: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/18.jpg)
© 2018 Magento, Inc. Page | 18
Framework implementation
complexity
Strict typing and client-side
code generation
Caching Documentation
Versioning
Libraries availability
GraphQL vs REST
![Page 19: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/19.jpg)
© 2018 Magento, Inc. Page | 19
Main GraphQL benefits for Magento
Query flexibility
Performance
![Page 20: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/20.jpg)
© 2018 Magento, Inc. Page | 20
Main GraphQL benefits for 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
![Page 21: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/21.jpg)
© 2018 Magento, Inc. Page | 21© 2018 Magento, Inc. Page | 21
GraphQL in MagentoPhase I: What’s done?
![Page 22: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/22.jpg)
© 2018 Magento, Inc. Page | 22
Most of the implementation is located in the the Magento 2 framework
•vendor/magento/framework/GraphQl/*
•vendor/magento/framework/GraphQlSchemaStitching/*
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/*
•vendor/magento/module-catalog-graph-ql/* •vendor/magento/module-customer-graph-ql/*
Where is the code?
![Page 23: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/23.jpg)
© 2018 Magento, Inc. Page | 23
Magento_GraphQl
Magento_EavGraphQl
Magento_CatalogUrlRewriteGraphQl
Magento_CmsGraphQl
Magento_CmsUrlRewriteGraphQl
Magento_StoreGraphQl
Magento_CustomerGraphQl
Magento_CatalogGraphQl
Magento_BundleGraphQl
Magento_GiftCardGraphQl
Magento_ConfigurableProductGraphQl
Magento_GroupedProductGraphQl
Magento_QuoteGraphQl
Magento_RewardGraphQl
Magento_RmaGraphQl
Magento_DownloadableGraphQl
Magento_SwatchesGraphQl
Magento_TaxGraphQl
Magento_UrlRewriteGraphQl
Magento_CatalogInventoryGraphQl
Magento_WeeeGraphQl
Why so many modules? - decoupling
![Page 24: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/24.jpg)
© 2018 Magento, Inc. Page | 24
Tools to build queries - GraphiQL
![Page 25: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/25.jpg)
© 2018 Magento, Inc. Page | 25© 2018 Magento, Inc. Page | 25
Storefront Admin
Resolvers
Service Contracts
Models
Persistence Layer
GraphQL’s place in Magento architecture
GraphQL REST & SOAP
Normalized Storage
Denormalized
![Page 26: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/26.jpg)
© 2018 Magento, Inc. Page | 26© 2018 Magento, Inc. Page | 26
Phase I: Framework
• Queries
• Extensibility
• Schema stitching
• Resolver interface
• Performance• Deferred resolution
• Schema lazy loading
• Collections over
services
• EAV
• Security
• Customer tokens
• Query nesting
analysis• Testing framework
![Page 27: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/27.jpg)
© 2018 Magento, Inc. Page | 27© 2018 Magento, Inc. Page | 27
Phase I: Coverage
Product coverage
• All product types
• Search and filtering
• Sorting and pagination
• Pricing
• Layered navigation
• Good example
Use cases
• Product detail page
• Product listing
• Search results
• Cart/checkout
• Wish lists
• Product widgets
![Page 28: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/28.jpg)
© 2018 Magento, Inc. Page | 28© 2018 Magento, Inc. Page | 28
Phase I: Coverage
What else is covered
• Category
• Customer
• URL Resolver
Use cases
• Category page
• Customer info page
• Identify the entity behind the URL
![Page 29: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/29.jpg)
© 2018 Magento, Inc. Page | 29© 2018 Magento, Inc. Page | 29
GraphQL in MagentoPhase II: What’s coming?
![Page 30: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/30.jpg)
© 2018 Magento, Inc. Page | 30
Phase II: Adding more coverage
![Page 31: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/31.jpg)
© 2018 Magento, Inc. Page | 31© 2018 Magento, Inc. Page | 31
Adjust query schema
![Page 32: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/32.jpg)
© 2018 Magento, Inc. Page | 32© 2018 Magento, Inc. Page | 32
Implement Resolver
![Page 33: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/33.jpg)
© 2018 Magento, Inc. Page | 33© 2018 Magento, Inc. Page | 33
Solving N+1 problem
![Page 34: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/34.jpg)
© 2018 Magento, Inc. Page | 34© 2018 Magento, Inc. Page | 34
Write tests
![Page 35: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/35.jpg)
© 2018 Magento, Inc. Page | 35© 2018 Magento, Inc. Page | 35
Write tests
![Page 36: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/36.jpg)
© 2018 Magento, Inc. Page | 36© 2018 Magento, Inc. Page | 36
How to contribute?
![Page 37: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/37.jpg)
© 2018 Magento, Inc. Page | 37
GraphQL community project: Wiki
![Page 38: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/38.jpg)
© 2018 Magento, Inc. Page | 38
GraphQL community project: ZenHub
![Page 39: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/39.jpg)
© 2018 Magento, Inc. Page | 39
GraphQL community project
![Page 40: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/40.jpg)
© 2018 Magento, Inc. Page | 40
GraphQL project contributors
![Page 41: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/41.jpg)
© 2018 Magento, Inc. Page | 41
Q&A
@magento_chris
@cpartica
![Page 42: GraphQL in Magentoro.meet-magento.com/wp-content/uploads/2018/10/Cristian-Partica-Min… · © 2018 Magento, Inc. Page | 2 Cristian Partica Magento 2 Core Software Engineer Part of](https://reader033.vdocument.in/reader033/viewer/2022051901/5ff04dc4fcac9a29c430ae9a/html5/thumbnails/42.jpg)
© 2018 Magento, Inc. Page | 42
Thank You
© 2018 Magento, Inc. Page | 42