GraphQL fantastic four

On GraphQL

@whereischarly

GraphQL fantastic four

On GraphQL

@whereischarly

• Build smooth user-experiences
  "Ask for what you want", optimistic UIs
   
• Solve data-complexity issue on front-end side
  Apollo cache, typed mutations, DDD APIs
   
• Microservices orchestration
  Apollo schema stitching ➡️ Apollo Federation

GraphQL fantastic four

GraphQL as
application
state management

photo by jesse orrico

GraphQL fantastic four

GraphQL as application state management

@whereischarly

GraphQL fantastic four

@whereischarly

1. GraphQL is a "data query and manipulation language for APIs"
2. What if your state behave like a local API?
3. ➡️ Apollo GraphQL Local state management

GraphQL as application state management

GraphQL fantastic four

@whereischarly

GraphQL as application state management

• @client directive for local state
• One language and hooks set for all data
• Local fields as variables

GraphQL fantastic four

@whereischarly

GraphQL as application state management

Local scalar values

• query without local resolver
• use "client.writeData()" to initialize and update state

GraphQL fantastic four

@whereischarly

GraphQL as application state management

Local complex values or computed values

GraphQL fantastic four

@whereischarly

GraphQL as application state management

Full local state management capabilities

• State: managed by ApolloCache, along side with APIs data
• Computed values: local resolvers (or APC 3 TypePolicy)
• Actions: mutations or client.writeQuery()
• Reactions: Apollo ObservableQuery
• Tools: Apollo Client Dev tools

GraphQL fantastic four

GraphQL
generation powers

photo by Esteban Lopez

GraphQL fantastic four

GraphQL generation powers

@whereischarly

GraphQL introspection is a core
- most underrated - feature of the language

GraphQL fantastic four

GraphQL generation powers

@whereischarly

State of JS 2019

GraphQL fantastic four

GraphQL generation powers

@whereischarly

Given a GraphQL Schema, generates:

• TypeScript types definition
• React Apollo hooks definition
• urql components
• Types for Flow, Java, Kotlin

GraphQL fantastic four

GraphQL generation powers

@whereischarly

https://graphql-code-generator.com

GraphQL without query definition

GraphQL fantastic four

GraphQL generation powers

@whereischarly

GraphQL fantastic four

GraphQL generation powers

@whereischarly

GQLess: GraphQL without queries

https://github.com/samdenty/gqless

React forms from GraphQL mutation

GraphQL fantastic four

GraphQL generation powers

@whereischarly

GraphQL fantastic four

GraphQL generation powers

@whereischarly

https://frontier-forms.dev

Frontier: Forms from GraphQL mutation

GraphQL fantastic four

GraphQL generation powers

@whereischarly

• Stronger types
   
• Bootstrapping of client configuration
   
• Better developer experience via documents

GraphQL special power: introspection

GraphQL fantastic four

GraphQL for
back-end to back-end

photo by Krzysztof Kowalik

GraphQL fantastic four

GraphQL for back-end to back-end

@whereischarly

Client

Server

Front-end

Back-end

GraphQL fantastic four

GraphQL for back-end to back-end

@whereischarly

Client

Server

Back-end

Back-end

GraphQL fantastic four

GraphQL for back-end to back-end

@whereischarly

More flexible rate limiting

A story

GraphQL fantastic four

GraphQL for back-end to back-end

@whereischarly

Story: more flexible rate-limiting

API

Indexer

Algolia

Shopify

requests
meta properties
for each product

GraphQL fantastic four

GraphQL for back-end to back-end

@whereischarly

Story: more flexible rate-limiting

Shopify REST API rate limiting

• per shop
• rate limit = 2 requests / seconds
  (Request-based limit)

GraphQL fantastic four

GraphQL for back-end to back-end

@whereischarly

Story: more flexible rate-limiting

GraphQL fantastic four

GraphQL for back-end to back-end

@whereischarly

Story: more flexible rate-limiting

Story: more flexible rate-limiting

GraphQL fantastic four

GraphQL for back-end to back-end

@whereischarly

Story: more flexible rate-limiting

"Flexible throttling" indexing system using GraphQL

• Each customer (shop) has a points score assigned
• Given the customer score, we compute if a query can be performed
• After each query,  we update the shop score

GraphQL fantastic four

GraphQL for back-end to back-end

@whereischarly

Companies providing GraphQL API with "Calculated query cost" rate limiting

GraphQL fantastic four

GraphQL for back-end to back-end

@whereischarly

• New API rate limiting offering
  More granular throttling
   
• Maintainable data pipelines
  Abstract complex APIs, ex: GraphQL Mesh

Take-aways

GraphQL fantastic four

"resolvers-less"
GraphQL

photo by Matias Caceres

GraphQL fantastic four

photo by jesse orrico

"resolvers-less" GraphQL

@whereischarly

GQL

SQL

GraphQL fantastic four

photo by jesse orrico

@whereischarly

Hasura translate GraphQL AST to SQL AST,
providing blazing fast execution with minimum configuration

"resolvers-less" GraphQL

GraphQL fantastic four

photo by jesse orrico

@whereischarly

Hasura features

• ACL support
• Authentication / Authorization (JWT)
• Remote schemas support
• Subscriptions support
• Trigger web-hooks on database events
• Bonus: one-click install on most cloud providers

"resolvers-less" GraphQL