GraphQL fantastic four

GraphQL fantastic four

Who am I

  • Sr. Software Engineer at Double
  • Former Tech lead at Algolia
  • Started using GraphQL 4 years ago

Charly POLY

GraphQL fantastic four

On GraphQL

GraphQL fantastic four

On GraphQL

  • 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

On GraphQL

GraphQL is much more than an efficient way of fetching data from the client side

GraphQL fantastic four

GraphQL as
application
state management

GraphQL fantastic four

GraphQL as application state management

GraphQL fantastic four

  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

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

GraphQL as application state management

Local scalar values

Local complex values or computed values

  • query without local resolver
  • use "client.writeData()" to initialize and update state
  • local mutations
  • local resolvers
  • APC 3 TypePolicy (read)

GraphQL fantastic four

GraphQL as application state management

Local complex values or computed values

GraphQL fantastic four

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

GraphQL fantastic four

GraphQL generation powers

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

GraphQL fantastic four

GraphQL generation powers

GraphQL fantastic four

GraphQL generation powers

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

GraphQL without query definition

GraphQL fantastic four

GraphQL generation powers

GraphQL fantastic four

GraphQL generation powers

GQLess: GraphQL without queries

React forms from GraphQL mutation

GraphQL fantastic four

GraphQL generation powers

GraphQL fantastic four

GraphQL generation powers

Frontier: Forms from GraphQL mutation

GraphQL fantastic four

GraphQL generation powers

  • 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

GraphQL fantastic four

GraphQL for back-end to back-end

Client

Server

Front-end

Back-end

GraphQL fantastic four

GraphQL for back-end to back-end

Client

Server

Back-end

Back-end

GraphQL fantastic four

GraphQL for back-end to back-end

More flexible rate limiting

A story

GraphQL fantastic four

GraphQL for back-end to back-end

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

Story: more flexible rate-limiting

Shopify REST API rate limiting

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

Shopify GraphQL API rate limiting

  • per shop
  • 1 field  = 1 point (Calculated query cost )
  • rate limit = 50 points / seconds

GraphQL fantastic four

GraphQL for back-end to back-end

Story: more flexible rate-limiting

Cost of the query =

1 +
   10 x (
                1 + 1 + 1 +1

               )

= 41 points

GraphQL fantastic four

GraphQL for back-end to back-end

Story: more flexible rate-limiting

Story: more flexible rate-limiting

GraphQL fantastic four

GraphQL for back-end to back-end

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

Went from 2-4 products per second

to 10-50 products per second

GraphQL fantastic four

GraphQL for back-end to back-end

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

GraphQL fantastic four

GraphQL for back-end to back-end

  • 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

GraphQL fantastic four

"resolvers-less" GraphQL

GQL

SQL

?

GraphQL fantastic four

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

"resolvers-less" GraphQL

GraphQL fantastic four

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

GraphQL fantastic four

Conclusion

GraphQL brings innovation beyond "front-end querying APIs":

  • Apollo GraphQL is reliable for local state management
  • GraphQL brings flexibility in back-end to back-end use-cases
  • GraphQL introspection finally brought great tools on front-end
  • GraphQL to SQL brings powerful server-less GraphQL use-cases

Thank you!

        slides on noti.st/charlypoly

        @whereischarly

        @wittydeveloper

The GraphQL fantastic four

By Charly Poly

The GraphQL fantastic four

  • 1,407