GraphQL

UNIVERSIDADE DO MINHO
IS 2019

O que é?
 UNIVERSIDADE DO MINHO
IS 2019

API Query Language que possibilita declarative data fetching.

Pedimos e obtemos exatamente o que queremos

Através de um único endpoint!

 UNIVERSIDADE DO MINHO
IS 2019

Query Language para APIs

Não tem nada a ver com Base de Dados.

Pode ser utilizada em qualquer contexto

 UNIVERSIDADE DO MINHO
IS 2019

Desenvolvido pelo em 2012

Aumento da utilização da aplicação móvel !

Precisavam de uma alternativa mais eficiente ao REST

Carregamento de dados

Heterogeneidade das aplicações

Rápido Desenvolvimento
 UNIVERSIDADE DO MINHO
IS 2019

REST 2.0?
 UNIVERSIDADE DO MINHO
IS 2019

REST Arquitetura utilizada no desenvolvimento de REST API, cada endpoint é uma resource.

Temos de desenvolver uma rest api para

obter a news feed do Facebook.
 UNIVERSIDADE DO MINHO
IS 2019

REST Arquitetura utilizada no desenvolvimento de REST API, cada endpoint é uma resource.

News Feed do Facebook

1. GET /user/[ID]/posts
{
"posts": [
{
"id": "535312",
"owner": "54213343",
"body": "Ever wanted to surf in Tahiti? Now you can",
"likes": 48,
"comments": 6,
"timestamp": "2019-22-11 10:00:00Z"
},
{
"id": "535312",
"owner": "543343",
"body": "Is GraphQL Rest 2.0?",
"likes": 1,
"comments": 0,
"timestamp": "2019-22-11 13:00:00Z"
}
]
}
 UNIVERSIDADE DO MINHO
IS 2019

REST News Feed do Facebook

1. GET /user/[ID]/posts
{
"posts": [
{
"id": "535312",
"owner": "54213343",
"body": "Ever wanted to surf in Tahiti? Now you can",
"likes": 48,
"comments": 6,
O que é que está a faltar?
"timestamp": "2019-22-11 10:00:00Z"
},
{
"id": "535312",
"owner": "543343",
"body": "Is GraphQL Rest 2.0?",
"likes": 1,
"comments": 0,
"timestamp": "2019-22-11 13:00:00Z"
}
]
}
 UNIVERSIDADE DO MINHO
IS 2019

REST News Feed do Facebook

1. GET /user/[ID]/posts
{
"posts": [
{ Fetch à informação de quem fez o post
"id": "535312",
"owner": "54213343", para ter o nome e a imagem
"body": "Ever wanted to surf in Tahiti? Now you can",
"likes": 48,
"comments": 6,
"timestamp": "2019-22-11 10:00:00Z"
},
{
"id": "535312",
"owner": "543343",
"body": "Is GraphQL Rest 2.0?",
"likes": 1,
"comments": 0,
"timestamp": "2019-22-11 13:00:00Z"
}
]
}
 UNIVERSIDADE DO MINHO
IS 2019

REST Arquitetura utilizada no desenvolvimento de REST API, cada endpoint é uma resource.

News Feed do Facebook

(Para já)

1. GET /user/[ID]/posts

2. GET /user/54213343
3. GET /user/543343

{ {
"user": { "user": {
"id": "54213343", "id": ”543343",
"avatar": "avatar":
"https://facebook.com....", "https://facebook.com....",
"name": "World Surf League" "name": ”GraphQL Admin"
} }
} }
 UNIVERSIDADE DO MINHO
IS 2019

Até agora
 UNIVERSIDADE DO MINHO
IS 2019

REST News Feed do Facebook

1. GET /user/[ID]/posts
2. GET /user/54213343
3. GET /user/543343
{
"user": {
"id": ”543343",
"avatar":
"https://faceboooook.com....
",
"name": ”GraphQL Admin"
}
}

{
"user": {
"id": "54213343",
"avatar":
"https://faceboooook.com....
",
"name": "World Surf League"
}
}
 UNIVERSIDADE DO MINHO
IS 2019

REST News Feed do Facebook

1. GET /user/[ID]/posts
2. GET /user/54213343
3. GET /user/543343 2# Overfetching
{
"user": { {
"id": ”543343", "user": {
"avatar": "id": "54213343",
"https://faceboooook.com.... "owner": "54213343",
", "avatar": "https://facebook.com....",
"name": ”GraphQL Admin" "name": "World Surf League",
} "birthday": "2001-01-01",
} "friends": 4000,
"coverPhoto": “https://www.face...”,
….
}
{ }
"user": {
"id": "54213343",
"avatar":
"https://faceboooook.com....
",
"name": "World Surf League"
}
}
 UNIVERSIDADE DO MINHO
IS 2019

REST

Serviço Serviço Serviço Serviço

/ /about /projects

!
 UNIVERSIDADE DO MINHO
IS 2019

Alguma solução?
 UNIVERSIDADE DO MINHO
IS 2019

Um único endpoint!
 UNIVERSIDADE DO MINHO
IS 2019

REST 1. GET /user/[ID]/posts

1. GET /user/[ID]/newsfeed 2. GET /user/54213343
3. GET /user/543343
4. ....

REST API já era.

As Resources ficam estritamente ligadas a um tipo e versão do

interface
 UNIVERSIDADE DO MINHO
IS 2019

REST
Outro problema não menos importante DOCUMENTAÇÃO

É necessário identificar todos as Resources existentes na REST API, os mais variados endpoints,
query parameters, etcetera.
 UNIVERSIDADE DO MINHO
IS 2019

GraphQL

query {
User(id:"OmeuID") {
name
avatar
nAmigos,
posts(last:10) {
user {
name,
avatar,
},
body,
nLikes,
nComments,
}
}
}
 UNIVERSIDADE DO MINHO
IS 2019

GraphQL
 UNIVERSIDADE DO MINHO
IS 2019

Arquitetura do GraphQL

O GraphQL é agnóstico ao Backend

• Forma como os dados são enviados;

• Formato dos Dados;
• Base de Dados;

Assim sendo, um servidor de GraphQL pode ser implementado com mais ou menos trabalho em
qualquer arquitetura nova, existente e legacy de legacy.
 UNIVERSIDADE DO MINHO
IS 2019

Core do GraphQL

Fortemente tipado;

Todos os tipos de dados expostos pela API são delineados em Schemas;

GraphQL Schema Definition Language (SDL)

Servidor explicita o que é possível fazer no mesmo;

Clientes descrevem o que querem obter.

Em suma é somente um Query Parser e uma biblioteca que permite definir Schemas.

Daí que acabe também por ser agnóstico ao Protocolo de Comunicação.

 UNIVERSIDADE DO MINHO
IS 2019

GraphQL

Serviço Serviço Serviço Serviço

GraphQL

/ /about /projects

!
 UNIVERSIDADE DO MINHO
IS 2019

GraphQL
type Query {
allFilms: [Film!]!
}

{ type Film {
allFilms { title: String
title director: Int!
director openingCrawl: String
characters(first: Int): [Characters]
characters(first:5) {
…
name }
}
} type Character {
} name: String
role: String
}
 {
UNIVERSIDADE DO MINHO
"data": { IS 2019
"allFilms": {
"films": [
GraphQL {
"title": "A New Hope",
"director": "George Lucas"
},
{
Exemplo "title": "The Empire Strikes Back",
"director": "Irvin Kershner"
},
{ {
"title": "Return of the Jedi",
allFilms { "director": "Richard Marquand"
},
films { {
title "title": "The Phantom Menace",
"director": "George Lucas"
director },
{
} "title": "Attack of the Clones",
} },
"director": "George Lucas"

} {
"title": "Revenge of the Sith",
"director": "George Lucas"
},
{
"title": "The Force Awakens",
"director": "J. J. Abrams"
}
]
}
}
}
 UNIVERSIDADE DO MINHO
IS 2019

Core do GraphQL

type Post {
title: String!
type Person { author: Person!
name: String! }
age: Int!
} type Person {
name: String!
age: Int!
posts: [Post!]!
}
 UNIVERSIDADE DO MINHO
IS 2019

Core do GraphQL

type Post { Isto é simplesmente a estrutura/modelo de

title: String! um Post ou Pessoa na nossa aplicação
author: Person!
}
Até ao momento só é a modelação de cada
um dos Elementos na nossa aplicação.
type Person {
name: String!
age: Int! Query, Mutation, Subscription
posts: [Post!]!
}
 UNIVERSIDADE DO MINHO
IS 2019

GraphQL

Tipo Query

type Query {
person(name: String!): Person!
}

query {
person(name: “Teste”) {
name,
age
}
}
 UNIVERSIDADE DO MINHO
IS 2019

GraphQL

Tipo Mutation

Criação de Dados;
Atualização de Dados;
Remoção de Dados;

type Mutation {
createPerson(name:String!,age:Int!):Person!
}
 UNIVERSIDADE DO MINHO
IS 2019

GraphQL

Tipo Subscription

Cliente subscreve a um evento;

Inicia uma conexão com o servidor – Websocket;
Sempre que há uma mutação que vá de encontro à subscrição efetuada, o
cliente é avisado.

type Subscription {
newPerson: Person!
}
 UNIVERSIDADE DO MINHO
IS 2019

GraphQL

Resolvers

Funções necessárias para implementar a API. Tudo o que foi falado até ao momento -
Fields, Tipos, Queries, Mutations, etcetera – torna-se inútil se não houver funções
resolvers que suporte cada um dos elementos.

GraphQL

Estrutura Comportamento

As capacidades anteriormente definidas

Descrição abstrata das capacidades
necessitam de se comportar de acordo com o
do servidor através do Schema.
que foi delineado.
 UNIVERSIDADE DO MINHO
IS 2019

Resolvers

Basicamente um resolver é a função que sabe o que fazer com os dados e é

executada sempre que o Tipo, Field é invocado.

type User { const UserType = new GraphQLObjectType({ const schema = new GraphQLSchema({
id: ID! name: 'User’,
name: String fields: { query: new GraphQLObjectType({
} id: { name: 'Query’,
type: GraphQLID, fields: {
type Query { resolve: (root, args, context, info) user: {
user(id: ID!): User => { type: UserType,
} return root.id args: {
} id: { type: GraphQLID }
query { }, },
user(id: "abc") { name: { resolve: (root, args, context, info)
id type: GraphQLString, =>{
name resolve: (root, args, context, info) const { id } = args
} => { return fetchUserById(id)
} return root.name }
} }
} }
} })
}) })
 UNIVERSIDADE DO MINHO
IS 2019

Resolvers

A completa liberdade de implementar os nossos métodos através do resolve

é o que permite ao GraphQL ser agnóstico a quase tudo.

Através de um resolver eu posso:

• Obter dados de uma Base de Dados;

• Posso fazer um pedido a uma REST API, a serviços SOAP;
• A Sistemas Legacy que usem qualquer tipo de comunicação baseada em Sockets.
• Merge de informação vinda de várias fontes de Informação.
• ...
 UNIVERSIDADE DO MINHO
IS 2019

Resolvers

Resolve – root, args, context, info

Root (parent) – o GraphQL vai fazendo parse da Query nível a nível. O root é o resultado do
resolver do nível anterior.

Args – Argumentos passíveis de serem utilizados pela query.

Context – Meio para os resolvers comunicarem e partilharem informação entre si. Object
partilhado no encadeamento de resolvers.

Info – Não é muito mais do que uma AST. Só tem utilidade no GraphQL Bindings
 UNIVERSIDADE DO MINHO
IS 2019

Resolvers
 UNIVERSIDADE DO MINHO
IS 2019

GraphQL

Introspection

O GraphQL através de uma série de meta fields permite consultar tudo o

que é possível fazer no GraphQL Server.

Através de uma query ao __schema field.

Todos os meta fields são precedidos de double underscore

 UNIVERSIDADE DO MINHO
IS 2019

GraphQL

Web Api Cliente

!
 UNIVERSIDADE DO MINHO
IS 2019

GraphQL

Web Api Cliente

GET Modelo 1

GET Modelo 1

!
 UNIVERSIDADE DO MINHO
IS 2019

GraphQL

Web Api Cliente

Model V1 View V1
Model V2 View V2
GET Modelo 1 v2

GET Modelo 1 v2

!
 UNIVERSIDADE DO MINHO
IS 2019

GraphQL

GraphQL Server Cliente

!
GET Modelo 1 v2

GET Modelo 1 v2

View V1
View V2
 UNIVERSIDADE DO MINHO
IS 2019

GraphQL

Cliente
GraphQL Server

!
GET Modelo 1 v2

GET Modelo 1 v2

View V1
View V2
 UNIVERSIDADE DO MINHO
IS 2019

GraphQL

Exemplo

Express-GraphQL
 UNIVERSIDADE DO MINHO
IS 2019

GraphQL

EXEMPLO - GRAPHQL

https://graphql.github.io/swapi-graphql/

https://swapi.co/
 UNIVERSIDADE DO MINHO
IS 2019

GraphQL

Bibliografia

https://www.howtographql.com/

https://www.prisma.io/blog

https://facebook.github.io/graphql/draft/

https://github.com/chentsulin/awesome-
graphql

https://graphql.github.io/swapi-graphql/
 UNIVERSIDADE DO MINHO
IS 2019

GraphQL

Trabalho

Da mesma maneira que o SOAP começou a ser substituído pela arquitetura REST, chegou a
altura de começar a transformar a arquitetura REST num GraphQL Server.

Libs:
Express-graphql