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

© 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.


Cristian Partica

Magento 2 Core Software Engineer

Part of the 3 devs team that started GraphQl project in Magento


Agenda


• 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?


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


Why GraphQL?


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


Use cases

• Headless integrations

• PWA (progressive web apps)

• Mobile app

• Custom front end

Where would we use it?

Why invest in APIs?


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



XML RPC SOAP REST GraphQL

Web API evolution in Magento


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?


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


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


GraphQL vs REST

Source: https://twitter.com/NikkitaFTW

The simple explanation:

…using burgers


GraphQL vs REST

Source: Source: https://twitter.com/peggyrayzis

For pizza lovers:

…using pizza


Framework implementation

complexity

Strict typing and client-side

code generation

Caching Documentation

Versioning

Libraries availability

GraphQL vs REST


Main GraphQL benefits for Magento

Query flexibility

Performance


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


GraphQL in MagentoPhase I: What’s done?


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?


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


Tools to build queries - GraphiQL


Storefront Admin

Resolvers

Service Contracts

Models

Persistence Layer

GraphQL’s place in Magento architecture

GraphQL REST & SOAP

Normalized Storage

Denormalized


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


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


Phase I: Coverage

What else is covered

• Category

• Customer

• URL Resolver

Use cases

• Category page

• Customer info page

• Identify the entity behind the URL


GraphQL in MagentoPhase II: What’s coming?


Phase II: Adding more coverage


Adjust query schema


Implement Resolver


Solving N+1 problem


Write tests


Write tests


How to contribute?


GraphQL community project: Wiki


GraphQL community project: ZenHub


GraphQL community project


GraphQL project contributors


Q&A

@magento_chris

@cpartica


Thank You


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

Documents