Zensations Drupal 8 GraphQL Presentation 2015

Preview:

Citation preview

GRAPHQLSebastian Siemssen @thefubhy

A LITTLE STORY …

‣ Requires multiple round trips for fetching complex object graphs

‣ Over fetching — As the model grows, so does the payload

‣ High potential for breaking API changes

‣ Structure of the response dictated by the server

‣ Potentially a huge amount of different endpoints and thus complexity

‣ No formal specification resulting in various other shortcomings

PROBLEMS WITH REST

DEAR REST, I STILL LOVE YOU !

Multiple round trips

When fetching complex, relational data structures: In order to descent further into the object graph, multiple round trips to the server are required.

Over fetching

Unless specifically designed for a given purpose, you often have to deal with needlessly large and bloated

responses.

Compatibility and versioning

By changing your model you are very likely to break your APIs. API versioning can mitigate that potential

damage at the cost of exponentially increasing complexity.

Endpoints galore

Attempting to circumvent the aforementioned problems often leads to a huge amount of bespoke/ad-hoc endpoints. This, in turn, inevitably increases

the complexity of your application.

Your API is usually composed of a

spectrum of different interpretations of REST

No formal specification

No prescribed pattern for deprecation. No standardized introspection functionality.

REST IS WHAT YOU MAKE IT

„This is not not how we as product developers think about data. Product developers think of data in

terms of graphs.“

Nick Schrock

Code cartoons by Lin Clark

WHAT IS GRAPHQL?

What is GraphQL?

GraphQL is a query language designed to build client applications by providing an intuitive and flexible

syntax and system for describing their data requirements and interactions.

IT IS NOT A QUERY LANGUAGE FOR A GRAPH DATABASE

GRAPHQL IS AGNOSTIC TO YOUR

STORAGE LAYER

{      me  {          name      }  }

{      'me':  {          'name':  'Sebastian  Siemssen'      }  }

{      me  {          name      }  }

{      user(id:  123)  {          name      }  }

{      user(id:  123)  {          name      }  }

{      'user':  {          'name':  'Sebastian  Siemssen'      }  }

{      'me':  {          'name':  'Sebastian  Siemssen',          'company':  {              'name':  'Zensations',              'website':  'http://zensations.at'          }      }  }

{      me  {          name,       company  {              name,              website          }      }  }

{      'me':  {          'name':  'Sebastian  Siemssen',          'profilePic':  {              'width':  100,              'height':  200,              'url':  'http://...'          }      }  }

{      me  {          name,       profilePic(size:  100)  {              width,              height,              url          }      }  }

{      'me':  {          'name':  'Sebastian  Siemssen',          'small':  {              'width':  100,              'height':  200,              'url':  'http://...'          },          'large':  {              'width':  300,              'height':  600,              'url':  'http://...'          }      }  }

{      me  {          name,       small:profilePic(size:  100)  {              width,              height,              url          },       large:profilePic(size:  300)  {              width,              height,              url          }      }  }

{      'me':  {          'name':  'Sebastian  Siemssen',          'articles':  [         {                  'title':  'GraphQL  rocks'              },         {                  'title':  'Ruben  sucks'              },         {                  'title':  '...'              },         {                  'title':  '...'              },          ]      }  }

{      me  {          name,       articles  {              title          }      }  }

{      'me':  {          'name':  'Sebastian  Siemssen',          'articles':  [              {                  'title':  'GraphQL  rocks',                  'comments':  [                      {                          'author':  {                              'name':  'Ruben  Teijeiro',                              'label':  'This  is  sorcercy!'                          }                      },                      {                          'author':  {                              'name':  'Dries  Buytaert',                              'label':  'We  need  that  in  core!'                          }                      }                  ]              }          ]      }  }

{      me  {          name,       articles  {              title,              comments(first:  10)  {                  author  {                      name,                      label                  }              }          }      }  }

Code cartoons by Lin Clark

Code cartoons by Lin Clark

Code cartoons by Lin Clark

GRAPHQL CHANGES THE SERVER — CLIENT

RELATIONSHIP

THE SERVER PUBLISHES ITS POSSIBILITIES

THE CLIENT SPECIFIES ITS REQUIREMENTS

type  Query  {      me:  User,      user:  (id:  Int!):  User  }

{      me  {          name      },      user(id:  123)  {          name      }  }

type  User  {      name:  String,      articles:  (first:  Int,  orderBy:  ArticleOrderEnum):  [Article]  }

{      me  {          name          articles(first:  10,  orderBy:  CREATION_DATE)      },      user(id:  123)  {          name,          articles(first:  10,  orderBy:  CREATION_DATE)      }  }

enum  ArticleOrderEnum  [      CREATION_DATE,      CHANGED_DATE,      IMPORTANCE  ]

TYPE INTROSPECTION

{      __schema  {          queryType  {              name          },          types  {              name,              fields  {                  name,                  type  {                      kind                      name,                      ofType  {                          name                      }                  }              }          }      }  }

BUILDING A GRAPHQL SERVER

GraphQL

Your application code

Database External APIs Others

type  User  {      name(user)  {          return  user.name;      },      articles(user,  arguments)  {          return  storage-­‐>load(…);      }  }

There is even more …Conditionals, Fragments, Mutations, Subscriptions, …

DEMO

QUESTIONS

‣ RFC Working Draft: https://facebook.github.io/graphql/

‣ Reference implemenetation: https://github.com/graphql/graphql-js

‣ GraphiQL: https://github.com/graphql/graphiql

‣ StarWars API Playground: http://graphql-swapi.parseapp.com/

‣ GraphQL Relay: https://facebook.github.io/relay/docs/graphql-relay-specification.html

‣ Learn GraphQL: https://learngraphql.com/

‣ …

RESOURCES

A Wiedner Hauptstraße 64 1040 Wien

T 01 89 00 179

M office@zensations.at

W www.zensations.at