![#GraphQL@luisw19
GraphQL – What is it then?
A consumer oriented query language, a strongly typed schema
language and a runtime to implement GraphQL services.
Define Schema
type Country {
id: ID!
name: String!
code: String!
}
type query {
countries: [Country]
}
GraphQL Service GraphQL Client
Quickly write and
run queries
{
getCountries(name:"great")
{
name
}
}
GraphQL Client
Get exactly what
you asked for
{
"data": {
"countries": [
{
"name": "United Kingdom"
}
]
}
}
01](https://image.slidesharecdn.com/devoxx-uk-2018-graphql-luisweirv1-180511094759/85/DEVOXX-UK-2018-GraphQL-as-an-alternative-approach-to-REST-9-320.jpg)
![#GraphQL@luisw19
Browser
GraphQL Client
Simple GraphQL Query Demo (I) - Service
{
query
}
GraphQL Server:
Apollo/Express
GraphQL Service
Graphiql
GraphQL Schema
GraphQL Endpoint
http://.../graphiql
Query Operation {JSON}
[HTTP/POST]
{JSON}
{
data
}
https://github.com/luisw19/graphql-samples/tree/master/graphql-countries-part1
02](https://image.slidesharecdn.com/devoxx-uk-2018-graphql-luisweirv1-180511094759/85/DEVOXX-UK-2018-GraphQL-as-an-alternative-approach-to-REST-22-320.jpg)
![#GraphQL@luisw19
Browser
GraphQL Client
Simple GraphQL Query Demo (II) – REST Backend
{
query
}
GraphQL Server:
Apollo/Express
GraphQL Service
Graphiql
GraphQL Schema
GraphQL Endpoint
Query Operation {JSON}
[HTTP/POST]
{JSON}
{
data
}
https://github.com/luisw19/graphql-samples/tree/master/graphql-countries-part2
[HTTP/GET]
https://restcountries.eu/rest/v2/{resource}
{JSON}
REST COUNTRIES
02](https://image.slidesharecdn.com/devoxx-uk-2018-graphql-luisweirv1-180511094759/85/DEVOXX-UK-2018-GraphQL-as-an-alternative-approach-to-REST-23-320.jpg)
![#GraphQL@luisw19
Docker Container
Browser
GraphQL Client
Simple GraphQL Query Demo (III) - Mutation
{
query
}
GraphQL Server:
Apollo/Express
GraphQL Service
Graphiql
GraphQL Schema
GraphQL Endpoint
Query Operation {JSON}
[HTTP/POST]
{JSON}
{
data
}
https://github.com/luisw19/graphql-samples/tree/master/graphql-countries-part2
[HTTP/GET]
https://restcountries.eu/rest/v2/{resource}
{JSON}
REST COUNTRIES
[HTTP/POST]
http://localhost:8000/{resource}
{JSON}
RequestBIN
02](https://image.slidesharecdn.com/devoxx-uk-2018-graphql-luisweirv1-180511094759/85/DEVOXX-UK-2018-GraphQL-as-an-alternative-approach-to-REST-24-320.jpg)
DEVOXX UK 2018 - GraphQL as an alternative approach to REST
- 1. @luisw19#GraphQL GraphQL as an alternative approach to REST Luis Weir @luisw19 blog: www.soa4u.co.uk www.capgemini.com
- 2. @luisw19#GraphQL Luis Weir CTO Oracle Practice - Capgemini UK [email protected] uk.linkedin.com/in/lweir @luisw19 http://www.soa4u.co.uk apiplatform.cloud/ Goes to Print Q2 2018 tinyurl.com/eapim18 Goes to Print Q4 2018 Latest articles: • Is BPM Dead, Long Live Microservices? • Five Minutes with LuisWeir • 2nd vs 3rd Generation API Platforms - A Comprehensive Comparison • Podcast:Are Microservices and APIs Becoming SOA 2.0? • 3rd-Generation API Management: From Proxies to Micro-Gateways • Oracle API Platform Cloud Service Overview About Myself
- 3. #GraphQL@luisw19Retail Recruitment Digitization © 2018 Capgemini. All rights reserved. Agenda GraphQL – context & key concepts GraphQL vs REST PoV 01 03 Demos02 Conclusions04
- 4. APIs are doors to information and functionality
- 5. #GraphQL@luisw19 But some doors can be unfit for purpose… source: https://imgur.com/a/J3ttg 01
- 6. #GraphQL@luisw19 Why GraphQL? Source: https://dev-blog.apollodata.com/graphql-vs-rest-5d425123e34b by Sashko Stubailo
- 7. #GraphQL@luisw19 GraphQL - Background • Created by Facebook in 2012 to get around a common constraints in the REST when fetching data • Publicly released in 2015 • GraphQL Schema Definition Language (SDL) added to spec in Feb’18 Latest release: http://facebook.github.io/graphql Latest draft: http://facebook.github.io/graphql/draft/ https://GraphQL.org 01
- 8. #GraphQL@luisw19 GraphQL – What is it NOT? a query language for a databases in spite of its name, it has nothing to do with Graphs DBs A silver Bullet necessarily a replacement for REST. Both can work together 01
- 9. #GraphQL@luisw19 GraphQL – What is it then? A consumer oriented query language, a strongly typed schema language and a runtime to implement GraphQL services. Define Schema type Country { id: ID! name: String! code: String! } type query { countries: [Country] } GraphQL Service GraphQL Client Quickly write and run queries { getCountries(name:"great") { name } } GraphQL Client Get exactly what you asked for { "data": { "countries": [ { "name": "United Kingdom" } ] } } 01
- 10. #GraphQL@luisw19 Who is using it? Lots of organisations are embracing GraphQL: http://graphql.org/users 01
- 11. #GraphQL@luisw19 Increasing rapidly in Popularity https://trends.google.com/trends/explore?date=2016-01-01%202018-05-07&q=GraphQL,REST%20API,OData GraphQL REST API OData Jan 2016 May 2018 01
- 12. #GraphQL@luisw19 Let’s put it into perspective https://trends.google.com/trends/explore?date=2004-01-10%202018-05-07&q=GraphQL,REST%20API,OData,WSDL trend WSDL ?? 01 GraphQL REST API OData
- 13. #GraphQL@luisw19 GraphQL – Key Concepts There are 5 key characteristics of GraphQL that are important to understand: Hierarchical Queries as hierarchies of data definitions, shaped just how data is expected to be retuned. 1 View-centric By design built to satisfy frontend application requirements.. 2 Strongly-typed A GraphQL servers defines a specific type system. Queries are executed within this context. 3 4 Introspective The type system itself is queryable. Tools are built around this capability. 5 Version-Free GraphQL takes a strong opinion on avoiding versioning by providing the tools for the continuous evolution. 01
- 14. #GraphQL@luisw19 GraphQL Server Implementation GraphQL Schema Definition Language GraphQL Schema (Data) Types (Object, Input, Scalar, Enum, Interface, Union) Queries (operation type) Mutations (operation type) Resolvers f(x), f(x), f(x) Subscriptions (operation type) Define Types have have have Execute GraphQL – Anatomy 01
- 15. #GraphQL@luisw19 GraphQL Server Implementation GraphQL Schema Definition Language GraphQL Schema (Data) Types (Object, Input, Scalar, Enum, Interface, Union) Queries (operation type) Mutations (operation type) Resolvers f(x), f(x), f(x) Subscriptions (operation type) Define Types have have have Execute GraphQL – Anatomy Effectively the blueprint of a GraphQL API, it defines the Types, Queries and Mutations supported in a GraphQL service 1 01
- 16. #GraphQL@luisw19 GraphQL Server Implementation GraphQL Schema Definition Language GraphQL Schema (Data) Types (Object, Input, Scalar, Enum, Interface, Union) Queries (operation type) Mutations (operation type) Resolvers f(x), f(x), f(x) Subscriptions (operation type) Define Types have have have Execute GraphQL – Anatomy Object, Input, Scalar, Enumeration, Interfaces and Unions are all types to define data structures, which are used in Operation types. 2 01
- 17. #GraphQL@luisw19 GraphQL Server Implementation GraphQL Schema Definition Language GraphQL Schema (Data) Types (Object, Input, Scalar, Enum, Interface, Union) Queries (operation type) Mutations (operation type) Resolvers f(x), f(x), f(x) Subscriptions (operation type) Define Types have have have Execute GraphQL – Anatomy Entry point for operations that fetch data (read / search). Note that a single Query type can define multiple query operations. 3 01
- 18. #GraphQL@luisw19 GraphQL Server Implementation GraphQL Schema Definition Language GraphQL Schema (Data) Types (Object, Input, Scalar, Enum, Interface, Union) Queries (operation type) Mutations (operation type) Resolvers f(x), f(x), f(x) Subscriptions (operation type) Define Types have have have Execute GraphQL – Key Concepts Entry point for operations that create/update data via a GraphQL service. Note that a single Mutation type can define multiple mutation operations. 4 01
- 19. #GraphQL@luisw19 GraphQL Server Implementation GraphQL Schema Definition Language GraphQL Schema (Data) Types (Object, Input, Scalar, Enum, Interface, Union) Queries (operation type) Mutations (operation type) Resolvers f(x), f(x), f(x) Subscriptions (operation type) Define Types have have have Execute GraphQL – Anatomy Under Draft: Pub/sub system for near-realtime updates. Unlike queries or mutations, it can deliver more than one result via push. https://github.com/facebook/graphql/pull/267 01 5
- 20. #GraphQL@luisw19 GraphQL Server Implementation GraphQL Schema Definition Language GraphQL Schema (Data) Types (Object, Input, Scalar, Enum, Interface, Union) Queries (operation type) Mutations (operation type) Resolvers f(x), f(x), f(x) Subscriptions (operation type) Define Types have have have Execute GraphQL – Anatomy Functions that define how each field, within a GraphQL Query or Operation is to be acted upon. 6 01
- 21. #GraphQL@luisw19 GraphQL Schema Cheat Sheet https://github.com/sogko/graphql-schema-language-cheat-sheet 01
- 22. #GraphQL@luisw19 Browser GraphQL Client Simple GraphQL Query Demo (I) - Service { query } GraphQL Server: Apollo/Express GraphQL Service Graphiql GraphQL Schema GraphQL Endpoint http://.../graphiql Query Operation {JSON} [HTTP/POST] {JSON} { data } https://github.com/luisw19/graphql-samples/tree/master/graphql-countries-part1 02
- 23. #GraphQL@luisw19 Browser GraphQL Client Simple GraphQL Query Demo (II) – REST Backend { query } GraphQL Server: Apollo/Express GraphQL Service Graphiql GraphQL Schema GraphQL Endpoint Query Operation {JSON} [HTTP/POST] {JSON} { data } https://github.com/luisw19/graphql-samples/tree/master/graphql-countries-part2 [HTTP/GET] https://restcountries.eu/rest/v2/{resource} {JSON} REST COUNTRIES 02
- 24. #GraphQL@luisw19 Docker Container Browser GraphQL Client Simple GraphQL Query Demo (III) - Mutation { query } GraphQL Server: Apollo/Express GraphQL Service Graphiql GraphQL Schema GraphQL Endpoint Query Operation {JSON} [HTTP/POST] {JSON} { data } https://github.com/luisw19/graphql-samples/tree/master/graphql-countries-part2 [HTTP/GET] https://restcountries.eu/rest/v2/{resource} {JSON} REST COUNTRIES [HTTP/POST] http://localhost:8000/{resource} {JSON} RequestBIN 02
- 25. #GraphQL@luisw19 GraphQL vs REST GraphQL REST (++) Usage: Best usage experience for developers (Graphiql is brilliant!) (~) API-first design:Tooling evolving (build a service to mock) (~) Usage: depends on the quality of API definition and documentation (+) API-first design: good tools available (e.g.Apiary, Swagger Hub) Developer Experience (design and consume APIs) Design Try Build API Composition (query data from multiple sources) API (++) Perfectly suited for API composition. Each field can be fetch (in parallel) from any source in a single query. (--) The nature of REST makes it difficult to model resources that combine data structures from multiple sources. HATEOAS results in chattiness. (++) Brilliant (+) Good (~) Neutral (it depends) (-) Not very good (--) It sucks! API Gateway (API routing, security, policies) (-) Existing Gateways have rich support for REST, not yet GraphQL -but could be used. Alternative is to use a GraphQL Service as API Gateway. (++) API Gateways take away from REST endpoints common tasks (e.g. OAuth,API keys, throttling, security) API API Gateway API API 03
- 26. #GraphQL@luisw19 GraphQL vs REST GraphQL REST (++) Brilliant (+) Good (~) Neutral (it depends) (-) Not very good (--) It sucks! Caching (--) Network: unsuitable as there is a common URL for all operations. (+) Service: possible based on Object Type (even fields) and tools like REDIS (++) Network: Caching is easy as each resource is a unique URI. Common tools can be used (e.g. CDNs). (+) Service: It’s equally possible at service Level. Network Caching App Cache Client Back End Resource (~) Specification doesn’t cover this. Standards like OAuth, OpenID in combination of custom (for fine- grained). (++) Major standards (OAuth 2, OpenId) supported by API Gateways and frameworks. Authentication / Authorization Client Resource Authorisation Server 1 2 Versioning (++) Best practices are clear. Versioning should be avoided and tools are provided (e.g. deprecation of fields) for continuous evolution. (-) Best practice less clear, in practice URI based versioning very popular although not encouraged. 03
- 27. #GraphQL@luisw19 GraphQL vs REST (completely subjective!) GraphQL REST +++++++ (7) ~~ (2) --- (3) ++++++++ (8) ~~ (2) --- (3) à But it will only improve! 03
- 28. #GraphQL@luisw19 28 © 2018 Capgemini. All rights reserved. © 2018 Capgemini. All rights reserved.28 1 3 Conclusions Still early days but GraphQL has huge potential GraphQL takes away many of the headaches of dealing with REST from a client side -specially around complex queries (against multiple sources). However tooling specially around API Design and API Gateways is still evolving. So bear this in mind when considering GraphQL. 2 GraphQL and REST can work nicely together There are thousands of REST APIs (external and internal) and REST still a viable and popular option. Instead of boiling the ocean, as Roy said, GraphQL is not necessarily a replacement for REST. As shown in this presentation both can be complementary and work together. There is no silver bullets –do your own research There is tons of information available in the GraphQL Communities page. Explore it, learn about it and adopt it based on your own criteria and requirements. And hope this presentation helped in this process! 04
- 29. #GraphQL @luisw19 Q & A