© 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.
© 2018 Magento, Inc. Page | 2
Cristian Partica
Magento 2 Core Software Engineer
Part of the 3 devs team that started GraphQl project in Magento
© 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?
© 2018 Magento, Inc. Page | 4© 2018 Magento, Inc. Page | 4
What is GraphQL?
© 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
© 2018 Magento, Inc. Page | 6© 2018 Magento, Inc. Page | 6
Why GraphQL?
© 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
© 2018 Magento, Inc. Page | 8
Use cases
• Headless integrations
• PWA (progressive web apps)
• Mobile app
• Custom front end
Where would we use it?
Why invest in APIs?
© 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
© 2018 Magento, Inc. Page | 11
© 2018 Magento, Inc. Page | 12
XML RPC SOAP REST GraphQL
Web API evolution in Magento
© 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?
© 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
© 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
© 2018 Magento, Inc. Page | 16
GraphQL vs REST
Source: https://twitter.com/NikkitaFTW
The simple explanation:
…using burgers
© 2018 Magento, Inc. Page | 17
GraphQL vs REST
Source: Source: https://twitter.com/peggyrayzis
For pizza lovers:
…using pizza
© 2018 Magento, Inc. Page | 18
Framework implementation
complexity
Strict typing and client-side
code generation
Caching Documentation
Versioning
Libraries availability
GraphQL vs REST
© 2018 Magento, Inc. Page | 19
Main GraphQL benefits for Magento
Query flexibility
Performance
© 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
© 2018 Magento, Inc. Page | 21© 2018 Magento, Inc. Page | 21
GraphQL in MagentoPhase I: What’s done?
© 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?
© 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
© 2018 Magento, Inc. Page | 24
Tools to build queries - GraphiQL
© 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
© 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
© 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
© 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
© 2018 Magento, Inc. Page | 29© 2018 Magento, Inc. Page | 29
GraphQL in MagentoPhase II: What’s coming?
© 2018 Magento, Inc. Page | 30
Phase II: Adding more coverage
© 2018 Magento, Inc. Page | 31© 2018 Magento, Inc. Page | 31
Adjust query schema
© 2018 Magento, Inc. Page | 32© 2018 Magento, Inc. Page | 32
Implement Resolver
© 2018 Magento, Inc. Page | 33© 2018 Magento, Inc. Page | 33
Solving N+1 problem
© 2018 Magento, Inc. Page | 34© 2018 Magento, Inc. Page | 34
Write tests
© 2018 Magento, Inc. Page | 35© 2018 Magento, Inc. Page | 35
Write tests
© 2018 Magento, Inc. Page | 36© 2018 Magento, Inc. Page | 36
How to contribute?
© 2018 Magento, Inc. Page | 37
GraphQL community project: Wiki
© 2018 Magento, Inc. Page | 38
GraphQL community project: ZenHub
© 2018 Magento, Inc. Page | 39
GraphQL community project
© 2018 Magento, Inc. Page | 40
GraphQL project contributors
© 2018 Magento, Inc. Page | 41
Q&A
@magento_chris
@cpartica
© 2018 Magento, Inc. Page | 42
Thank You
© 2018 Magento, Inc. Page | 42