Slide 1

Slide 1 text

APIS NODEJS COM GraphQL

Slide 2

Slide 2 text

Olar! Meu nome é Ana Bastos Sou engenheira de software e cientista da computação. 2 anabastos @naluhh @anapbastos

Slide 3

Slide 3 text

3

Slide 4

Slide 4 text

Client Server HTTP

Slide 5

Slide 5 text

HTTP REQUISIÇÃO Cabeçalho Corpo RESPOSTA Cabeçalho Corpo

Slide 6

Slide 6 text

GET POST PUT DELETE PATCH HEAD TRACE OPTIONS

Slide 7

Slide 7 text

Songs Followers 1.239 Jovelli How I Feel Ana Luiza Lorem Ipsum

Slide 8

Slide 8 text

HTTP GET Songs Followers Ana Luiza Lorem Ipsum users/123 RESPONSE a { name: .., accountName: .., nickname: Ana Luiza, email: {..}, bio: Lorem Ipsum avatar: {..}, birthday: .., city: .., location: {..} ... }

Slide 9

Slide 9 text

HTTP GET Songs Followers Ana Luiza Lorem Ipsum users/123/posts RESPONSE posts { { id: .. music: {..}, replies: {..}, likes: {..}, shares: {..}, … }, ... } Jovelli How I Feel

Slide 10

Slide 10 text

HTTP GET Songs Followers Ana Luiza Lorem Ipsum users/123/followers RESPONSE followers { { name: .., accountName: .., Nickname: Vilmar, email: {..}, avantar: .. … }, ... Jovelli How I Feel

Slide 11

Slide 11 text

Followers 1.239 Britnet Spears Toxic Pablo Estou indo embora Musical Taste: Pop / Sofrência Most popular posts

Slide 12

Slide 12 text

- Underfetching gerando a necessidade de fazer muitas requisições ou de criar endpoints muito específicos - Overfetching e com isso problemas em performance

Slide 13

Slide 13 text

FACEBOOK

Slide 14

Slide 14 text

“Ficamos frustrados com as diferenças entre os dados que queríamos e as requisições que eram necessárias para obtê-los” Lee Byron

Slide 15

Slide 15 text

GRAPHQL

Slide 16

Slide 16 text

Novo standard de APIs

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Nele todas as requisições são POST e os dados requisitados são explicitamente declarados

Slide 19

Slide 19 text

SOAP?

Slide 20

Slide 20 text

Desenvolvedores do Facebook - Mano vamo ter que usar SOAP. - Puts mas SOAP usa XML. Pra JS é tudo JSON. Seria loco se a gente usasse SOAP com JSON. - Hold my beer

Slide 21

Slide 21 text

SOAP 2.0 / GraphQL Auto-documentação Tipos / Schemas Usa JSON ao invés de XML e chama de uma linguagem nova

Slide 22

Slide 22 text

CORE CONCEPT

Slide 23

Slide 23 text

TYPE SYSTEM QUERY LANGUAGE SCHEMA

Slide 24

Slide 24 text

SCHEMA BASED

Slide 25

Slide 25 text

ID BOOLEAN FLOAT STRING INT

Slide 26

Slide 26 text

users folowers posts

Slide 27

Slide 27 text

posts

Slide 28

Slide 28 text

type Post { id: ID artist: String album: String music: String genre: String likes: Int }

Slide 29

Slide 29 text

user

Slide 30

Slide 30 text

type User { id: ID name: String avatarUrl: String description: String age: Integer status: Status musicalTaste: [String] posts: [Post] followers: [Follower] } enum Status { Active Blocked Inactive }

Slide 31

Slide 31 text

folowers

Slide 32

Slide 32 text

type Follower { id: ID user: User sinceWhen: Date }

Slide 33

Slide 33 text

Schemas descrevem o contrato entre o front e o back e o relacionamento entre os dados

Slide 34

Slide 34 text

ROOT TYPE FOLLO WERS POST USER [USER]

Slide 35

Slide 35 text

“EDGE”

Slide 36

Slide 36 text

QUERY MUTATION SUBSCRIPTION

Slide 37

Slide 37 text

QUERY

Slide 38

Slide 38 text

HTTP POST graphql/ RESPONSE data { userName: .., avatar: .., bio, followers [ {avatar: ..}, .. ] posts [ {artist: …, name:} BODY query profile{ user { name description } followers{ avatar } posts { artist name } }

Slide 39

Slide 39 text

ARGUMENTS

Slide 40

Slide 40 text

HTTP POST graphql/ RESPONSE data { userName: .., avatar: .., bio, followers [ {avatar: ..}, .. ] posts [ {artist: …, name:} BODY query profile { user { name description } followers{ avatar } posts(first: 5, orderBy: “date”) { artist name } }

Slide 41

Slide 41 text

HTTP POST graphql/ RESPONSE data { userName: .., avatar: .., bio, followers [ {avatar: ..}, .. ] posts [ {artist: …, name:} BODY query profile { user { musicalTaste } followers(first: 4){ avatar } popularPosts(first: 5, orderBy: “popularity”) { artist name } }

Slide 42

Slide 42 text

MUTATION

Slide 43

Slide 43 text

HTTP POST graphql/ RESPONSE data { status: “ok” } BODY mutation addPost { artist: “...” name: “...” album: “...” } }

Slide 44

Slide 44 text

addPost deletePost blockPosts promotePost

Slide 45

Slide 45 text

FORTEMENTE TIPADO

Slide 46

Slide 46 text

HTTP POST graphql/ RESPONSE ERRO BODY mutation addPost { artist: “...” name: 1 album: { name: “aa” } } }

Slide 47

Slide 47 text

HTTP POST graphql/ RESPONSE ERRO BODY query profile { qualquerCoisa }

Slide 48

Slide 48 text

DEPRECATION

Slide 49

Slide 49 text

BACK-END FRONT-END

Slide 50

Slide 50 text

REQUEST subscription { subscribeToComment (filter : { mutation_in : [CREATED] }){ comment { content author { username } } } } RESPONSE { “data”: { comment { content: “Nossa”, author { username: “Ana” } } } } RESPONSE { “data”: { comment { content: “Eita”, author { username: “Joao” } } } }

Slide 51

Slide 51 text

CLIENT SERVER GRAPHQL DATA RESOLVE BODY JSON { query: {..} variables:{..} } { data: {..} errors:{..} } G R A P H Q L

Slide 52

Slide 52 text

INDEPENDE DE BD

Slide 53

Slide 53 text

SERVER GRAPHQL RESTfull Api AWS Lambda SOAP Service MONGODB HTTP HTTP SOAP TCP/IP

Slide 54

Slide 54 text

Como o graphql vai me ajudar(backend) a pegar estes dados? Não vai :(

Slide 55

Slide 55 text

Já que GraphQL é agnostico de dados cada query ou mutation tem uma função resolver e nela é nossa responsabilidade buscar e estruturar os dados de acordo com o Schemas da forma mais perfomática pois o muitas vezes o client pode solicitar diversos dados com alta complexidade por de baixo dos panos

Slide 56

Slide 56 text

1 requisição 10 queries no banco

Slide 57

Slide 57 text

Query em JS

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

RELAÇÕES

Slide 61

Slide 61 text

ROOT TYPE FOLLO WERS POST USER [USER]

Slide 62

Slide 62 text

BODY query profile { user { folowers: [ user: { folowers: { user:... } } ] } Maximum depth: 3

Slide 63

Slide 63 text

SUBSCRIPTIONS

Slide 64

Slide 64 text

Mutations definem uma série de ações que mudam seus dados. Subscriptions definem uma série de eventos que você pode se inscrever(subscribe) pra quando os dados mudam.

Slide 65

Slide 65 text

Notificações Mensagens Live Feed

Slide 66

Slide 66 text

Independente de meio de transporte ● WebSockets ● ZeroMQ ou MQTT

Slide 67

Slide 67 text

RESPONSE { getPosts { ‘content’: { ... } } } REQUEST subscription getPosts($post: Post) { getPosts(content: $post){ content } }

Slide 68

Slide 68 text

GraphiQL

Slide 69

Slide 69 text

SYNTAX HIGHLIGHT AUTO COMPLETE AUTO DOCUMENTAÇÃO

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

Altair

Slide 72

Slide 72 text

Insomnia

Slide 73

Slide 73 text

COMO FAÇO NO NODE

Slide 74

Slide 74 text

yarn add -g -graphql

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

graphiql/ graphql/

Slide 80

Slide 80 text

MONTAR SCHEMA EM GRAPHQL

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

MONTAR SCHEMA EM JS

Slide 83

Slide 83 text

type Post { id: ID artist: String album: String music: String genre: String likes: Int }

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

O rest morreu? Não

Slide 88

Slide 88 text

MOTIVOS PARA USAR GRAPHQL

Slide 89

Slide 89 text

DIFERENTES CLIENTES: Há a necessidade de criar várias versões de dados diferentes para múltiplos clientes. LINKAR DADOS: Quando os dados mudam com muita frequência e precisam estar linkados sempre. NECESSIDADE DE ENDPOINTS MUITO ESPECIFICOS

Slide 90

Slide 90 text

MOTIVOS PARA NÃO USAR GRAPHQL

Slide 91

Slide 91 text

MINHA EXPERIÊNCIA

Slide 92

Slide 92 text

HYPE: Minha empresa gosta do stack do facebook e todo mundo acha mo hype. O FRONTEND SUGERIU REST É ANTIGO kk TOO NORMALIZED: Tenho muitas relações.

Slide 93

Slide 93 text

GraphQL Rest API HTTP METHODS POST GET POST PUT ETC Status Code Precisa lidar com todos os errors Default Cache do proprio navegador Precisa usar DataLoader. Default Peso da request Mais leve pois é só o necessário Overfetching / Underfetching Complexidade Escondida embaixo do tapete Explicita Documentação Default Precisa implementar

Slide 94

Slide 94 text

TIPS Deixar models extremamente dinâmicas(limits, orders, filters, pegar apenas os campos requisitados na query GraphQL). Usar context do graphQL para guardar estado Crie seu proprio status code

Slide 95

Slide 95 text

COMO ORGANIZAR O PROJ

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

GraphQL JS graphql.org/graphql-js How to graphql howtographql.com/basics RobinWieruch Graphql Series robinwieruch.de/graphql-tutorial FunFunFunction Graphql Series

Slide 98

Slide 98 text

Telegram t.me/GraphQLBrasil Conf graphqlconf.com.br Github github.com/graphql-brasil Slack graphql-slack.now.sh react-brasil-slack.herokuapp.com

Slide 99

Slide 99 text

Obrigada! anabastos @naluhh @anapbastos 99