# Strengthening the GraphQL API ## with the power of Greyskull ### Narrated by Jisse Reitsma

# Jisse Reitsma - <!-- .element: class="fragment" -->Founder of Yireo - <!-- .element: class="fragment" -->Trainer of backend and frontend developers - Magento, React, PWA Studio, Vue Storefront, GraphQL - <!-- .element: class="fragment" -->Creator of MageTestFest (2017, 2019) - <!-- .element: class="fragment" -->Creator of Reacticon (2018 x2) - <!-- .element: class="fragment" -->Creator of Reacticon v3 or v4 (June 2021) - <!-- .element: class="fragment" -->Magento Master 2017/2018/2019 Mover - <!-- .element: class="fragment" -->Member of ExtDN (Magento Extension Developer Network) - <!-- .element: class="fragment" -->And I love pizza with pineapple. Proper pizza! - <!-- .element: class="fragment" -->And I can make bad jokes too. It's not just Igor.

# Current state # of Magento GraphQL

# Current state - <!-- .element: class="fragment" -->Coverage is nearing completion

# GraphQL coverage - URL resolving, categories, products, CMS, PageBuilder - Customer mutations, addressbook - Support for Configurable Products, swatches - Add-to-cart, product options, gift cards - Inventory

# Still fuzzy or missing or incomplete? - <!-- .element: class="fragment" -->Proper implementation of payment endpoints by extension providers (?) - <!-- .element: class="fragment" -->VAT validation, quote estimation (?) - <!-- .element: class="fragment" -->Better ideas for extensibility of checkout (?) - <!-- .element: class="fragment" -->Server-side query caching (?)

# Current state - Coverage is nearing completion - <!-- .element: class="fragment" -->What you need is there - Quick responses, even without caching - Extensible by third party extensions - Extensible by any Magento backend developer - Stable, I guess - <!-- .element: class="fragment" -->Fuzzy roadmap - https://github.com/magento/graphql-ce/wiki/Roadmap - Not updated since Sept 18, 2019 - Repository itself is archived and merged - <!-- .element: class="fragment" -->Fuzzy - <!-- .element: class="fragment" -->Fuzzy

# Are you feeling fuzzy?

# Reflection on PWA - <!-- .element: class="fragment" -->GraphQL forms the glue between a PWA and Magento-as-a-Backend (MaaB) - <!-- .element: class="fragment" -->A PWA can be created using frontend tech of your choice - <!-- .element: class="fragment" -->For instance, you could use React, like some Magento PWA Studio people did - <!-- .element: class="fragment" -->Magento PWA Studio is not a PWA, it is a studio - <!-- .element: class="fragment" -->Maybe the GraphQL API is nearing complete coverage. Magento PWA Studio is not. - <!-- .element: class="fragment" -->Who cares? React is easy as hell and you can rapidly develop features with it - <!-- .element: class="fragment" -->The point of headless is to separate the frontend from the backend - <!-- .element: class="fragment" -->The point is not to be scared of anything that is not developed by Magento itself - <!-- .element: class="fragment" -->Can you build a PWA with the current Magento PWA Studio and GraphQL API? - <!-- .element: class="fragment" -->Yes! Assuming that you understand its implications.

# It's not me! # It is YOU!

# What about # performance?

# Strengthening GraphQL performance

# Full Page Cache for GraphQL - <!-- .element: class="fragment" -->Magento-based FPC for GraphQL endpoints - Currently implemented per module - Uses `@cache(cacheIdentity: classX)` to manage cache tags - <!-- .element: class="fragment" -->Varnish-based FPC - Supported by VCL file generated by Magento Admin Panel - See docs for `process_graphql_headers` VCL subroutine - <!-- .element: class="fragment" -->Middleware-based FPC - Apollo Server, Apollo Engine - Relay Server

# Using Varnish - Varnish calculates hash per: - HTTP headers `Store` and `Content-Currency` - Potentially other unique info that you add to your own VCL - Cache is skipped when `Bearer` token is set - With customer sessions and such - Caching is skipped on specific endpoints - GraphQL annotation `@cache(cacheable: false)` Potential issue when query queries across multiple endpoints

# Using Apollo Server - Intermediate Node-based proxy with caching support - Using `@cacheControl(maxAge: 42)` in schema or via resolver logic - Support for partial query result caching - Additional benefits - Server Side Rendering could be handled by same Apollo Server

# Is that your phone? # Or are you happy to see me?

# Strengthening GraphQL security

# GraphQL security - <!-- .element: class="fragment" -->Prevent exploits of GraphQL endpoints - Limiting input arguments (type definition, validation) - Limiting output data (maximum of items, blacklist fields) - <!-- .element: class="fragment" -->Limiting total query size - Calculating string length and throwing exceptions if needed - Tune hosting: `memory_limit`, `max_execution_time`, `max_input_nesting_level`, etc

```graphql { products(filter: {name: {match: "jacket"}}) { items { sku categories { products { items { sku categories { products { items { sku categories { products { items { sku } } } } } } } } } } } } ```

# GraphQL security - Prevent exploits of GraphQL endpoints - Limiting input arguments (type definition, validation) - Limiting output data (maximum of items, blacklist fields) - Limiting total query size - Calculating string length and throwing exceptions if needed - Tune hosting: `memory_limit`, `max_execution_time`, `max_input_nesting_level`, etc - <!-- .element: class="fragment" -->Whitelisting queries - Only allow those endpoints used by your PWA (like `cmsPage`) - See `apollographql/persistgraphql` - <!-- .element: class="fragment" -->Query depth - <!-- .element: class="fragment" -->Query complexity - <!-- .element: class="fragment" -->Throttling - <!-- .element: class="fragment" -->And some stuff I created for you

# Yeah, give it to me

# Query depth ```graphql { products(filter: {name: {match: "jacket"}}) { items { sku categories { products { items { sku categories { products { items { sku categories { products { items { sku ``` Query depth is 10

# Query complexity ```graphql { products(filter: {name: {match: "jacket"}}) { items { sku categories { products { items { sku categories { products { items { sku categories { products { items { sku ``` Query depth is 15

# Magento `QueryComplexityLimiter` ```xml <type name="Magento\Framework\GraphQl\Query\QueryComplexityLimiter"> <arguments> <argument name="queryDepth" xsi:type="number">20</argument> <argument name="queryComplexity" xsi:type="number">300</argument> </arguments> </type> ``` This configured the PHP library `webonyx/graphql-php` and adds `DocumentValidator` rules.

# Module `Yireo_CustomGraphQlQueryLimiter` - <span class="label">Repo </span><span class="value">https://github.com/yireo/Yireo_CustomGraphQlQueryLimiter</span> - Set depth to level `7` and play around with complexity ```json { "errors": [ { "message": "Max query depth should be 7 but got 10.", "extensions": { "category": "graphql" } } ] } ```

# Simple mutation ```graphql mutation { createEmptyCart } ``` Now, repeat this 10 million times.

# Module `Yireo_GraphQlRateLimiting` - <span class="label">Repo </span><span class="value">https://github.com/yireo/Yireo_GraphQlRateLimiting</span> - Based on `sunspikes/php-ratelimiter` - Settings - Enabled: Yes - Limit Queries: Yes - Limit Mutations: Yes - Maximum Queries: 100 - Maximum Mutations: 10 - Timeframe: 10

# Final thoughts - <!-- .element: class="fragment" -->Spend time on making sure GraphQL doesn't cause issues - Module configuration, hosting environment - <!-- .element: class="fragment" -->Consider a middleware server if Varnish feels too restricting - <!-- .element: class="fragment" -->No headless shop?

# No headless shop? - <!-- .element: class="fragment" -->Make sure to disable all GraphQL modules - `bin/magento module:disable $(bin/magento module:list --enabled | grep -i graphql)` - <!-- .element: class="fragment" --> Or even better, remove these modules - See https://github.com/yireo/magento2-replace-graphql

# We have the power

# Thanks ## Contact me via @jissereitsma or @yireo