O documento apresenta uma palestra sobre GraphQL e sua integração com Ruby on Rails. A palestra discute o que é GraphQL, como funciona, quais problemas resolve, a experiência do palestrante com GraphQL e demonstra como integrar um esquema GraphQL a uma aplicação Rails existente.

1. Globalcode – Open4education
Trilha – Ruby
Sergio Lima
Ruby Developer

2. Globalcode – Open4education
#rubydev.rb
@sergiosouzalima

3. Globalcode – Open4education
blog
writer
onebitcode.com/author/sergio-lima

4. Globalcode – Open4education
systems
analyst/
developer
linkedin.com/in/sergiosouzalima

5. Globalcode – Open4education
Uma Aplicação Ruby On Rails
Integrada com GraphQL,
a Linguagem do Facebook para APIs.

6. Globalcode – Open4education

7. Globalcode – Open4education
Agenda
Minha experiência com GraphQL.
GraphQL, o que é isso?
Como funciona?

8. Globalcode – Open4education
Agenda
Que problemas o GraphQL resolve?
Integração com Ruby On Rails.
Perguntas?

9. Globalcode – Open4education
Minha Experiência
com GraphQL.

10. Globalcode – Open4education
Minha Experiência
• Sistema de transações financeiras.
Feito em NodeJS
Arquitetura de dados informacional (data-mart)
Servidor de dados GraphQL

11. Globalcode – Open4education
Minha Experiência
• Artigo para o blog da Onebitcode
How to “Rails x GraphQL”
https://onebitcode.com/graphql-introducao/
Projeto
https://github.com/OneBitCodeBlog/graphqlapp

12. Globalcode – Open4education
Minha Experiência
• Palestra na Guide Investimentos
Slides
https://www.slideshare.net/sergiosouzalima/graphql-a-
linguagem-do-facebook-para-apis-93202036
Projeto
https://github.com/sergiosouzalima/transactionapp

13. Globalcode – Open4education
Minha Experiência
• Palestra na TDC 2018 São Paulo
Slides
https://pt.slideshare.net/sergiosouzalima/rails-api-com-graphql
Projeto
https://notabug.org/sergiosouzalima/graphqlapp
tdc-rails-graphql.herokuapp.com/
tdcapi.herokuapp.com/gq

14. Globalcode – Open4education
GraphQL,
o que é isso?

15. Globalcode – Open4education
GraphQL, o que é isso?
• Alternativa à maneira tradicional de se construir
APIs.

16. Globalcode – Open4education
GraphQL, o que é isso?
• É algo que colocamos entre um aplicativo front-end
e um serviço de dados de back-end.

17. Globalcode – Open4education
GraphQL, o que é isso?
• Projetada pelos engenheiros do Facebook, 2012.
• Site oficial
http://graphql.org
“A query language for your API”

18. Globalcode – Open4education
GraphQL, o que é isso?
• Mais que linguagem de consulta
• GraphiQL.
Mecanismo de execução de consulta
Feito em React
Documentação da API no browser
Permite testes

19. Globalcode – Open4education
GraphQL, o que é isso?
• Mas por que esse nome?
Especificação de API
baseada em grafos.

20. Globalcode – Open4education
GraphQL, o que é isso?
• Cada nó: um recurso do sistema.
• Recurso: usuário, cliente, fornecedor.
• Outro recurso:
• país do usuário
• peça fornecida pelo fornecedor
• nota fiscal do cliente
• …

21. Globalcode – Open4education
GraphQL, o que é isso?
user

22. Globalcode – Open4education
GraphQL, o que é isso?
user
country

23. Globalcode – Open4education
GraphQL, o que é isso?
user
country

24. Globalcode – Open4education
Como
funciona?

25. Globalcode – Open4education
Como funciona?
GraphQL
resolvers (queries) mutations
subscriptions fragments

26. Globalcode – Open4education
Como funciona?
GraphQL
resolvers (queries) mutations

27. Globalcode – Open4education
Como funciona?
GraphQL
consultas modificações

28. Globalcode – Open4education
Como funciona?
GraphQL
resolvers mutations
GET ALLGET PUTPOST
DELETE
R
E
S
T
R
E
S
T

29. Globalcode – Open4education
Como funciona?

30. Globalcode – Open4education
Como funciona?
REST GraphQL
GET user?id=1
query {
user(id: 1) {
name
email
}
}

31. Globalcode – Open4education
Como funciona?
REST GraphQL Resposta do resolver
GET
user?
id=1
query {
user(id: 1) {
name
email
}
}
{
"data": {
"user": {
"name": "Isaac",
"email”:"isaac@gmail.com"
}
}
}

32. Globalcode – Open4education
Como funciona?
REST GraphQL
GET users
query {
allUsers {
id
}
}

33. Globalcode – Open4education
Como funciona?
REST GraphQL Resposta do resolver
GET
users
query {
allUsers {
id
}
}
{
"data": {
"allUsers": [
{
"id": "1"
},
{
"id": "2"
}
]
}
}

34. Globalcode – Open4education
Como funciona?
REST GraphQL
POST users
name=Steve&is_admin=true
&email=jobs@apple.com&p
hone_number=55555555
mutation {
createUser(name: "Steve",
is_admin: true,
email:"jobs@apple.com",
country_id: 1,
phone_number: 55555555) {
id
}
}

35. Globalcode – Open4education
Como funciona?
REST GraphQL Resposta da mutation
POST
mutation {
createUser(name: "Steve",
is_admin: true,
email:"jobs@apple.com",
country_id: 1,
phone_number: 55555555)
{
id
}
}
{
"data": {
"createUser": {
"id": "9"
}
}
}

36. Globalcode – Open4education
Como funciona?
REST GraphQL
PUT users
id=9&name=‘Steve Jobs’
mutation {
updateUser(id: 9,
name: "Steve Jobs") {
name
}
}

37. Globalcode – Open4education
Como funciona?
REST GraphQL Resposta da mutation
PUT
mutation {
updateUser(id: 9,
name:"Steve Jobs”){
name
}
}
{
"data": {
"updateUser": {
"name": "Steve Jobs"
}
}
}

38. Globalcode – Open4education
Como funciona?
REST GraphQL
DELETE users id=9 mutation {
deleteUser(id: 9)
}

39. Globalcode – Open4education
Como funciona?
REST GraphQL Resposta da mutation
DELETE mutation {
deleteUser(id: 9)
}
{
"data": {
"deleteUser": true
}
}

40. Globalcode – Open4education
Que problemas o
GraphQL resolve?

41. Globalcode – Open4education
Que problema resolve?
• Motivação do Facebook
Acessos por conexões de rede lentas
A situação se complicava a medida que cresciam os
acessos ao Facebook via dispositivos móveis

42. Globalcode – Open4education
Que problema resolve?
TRADITIONAL
REST API
/users
/posts
/photos
/friends

43. Globalcode – Open4education
Que problema resolve?
GraphQL
API
users
posts
photos
friends
/graphql

44. Globalcode – Open4education
Que problema resolve?
Problema Solução
Under-fetching
Cliente consumidor de dados
recebe menos dados que o
necessário.
Apenas uma chamada para
vários recursos, recebendo
todos os dados necessários.

45. Globalcode – Open4education
Que problema resolve?
Problema Solução
Over-fetching
Cliente consumidor de dados
recebe muito mais dados que
o necessário.
Receber somente o
necessário, assim evita-se
demora na consulta e menor
processamento no servidor e
no cliente.

46. Globalcode – Open4education
Que problema resolve?
Problema Solução
Versionamento da API
APIs tradicionais, com o
passar do tempo, acontecem
modificação de campos.
Consulta é feita pelo cliente.
Ele decide quais dados
aparecem na query.
Sem necessidade de manter
versões das APIs.

47. Globalcode – Open4education
Que problema resolve?
Problema Solução
Muitas solicitações da
equipe de front-end
Tempo e esforço e de
comunicação entre equipes é
comum hoje em dia
A equipe de front-end
escolhe o que pedir da API.
A comunicação para este
propósito diminuirá,
liberando tempo para outras
atividades.

48. Globalcode – Open4education
Que problema resolve?
REST
API
data
requirements
characteristics
client
GraphQL
API
data
requirements
characteristics
client

49. Globalcode – Open4education
Integração com uma
aplicação Ruby On Rails.

50. Globalcode – Open4education
Integração com Rails
• How to GraphQL integrado com Rails
https://onebitcode.com/graphql-introducao/

51. Globalcode – Open4education
Integração com Rails
$ mkdir graphqlapp && cd graphqlapp
$ rvm use ruby-2.5.0@graphqlapp --ruby-version --create
$ gem install rails -v 5.2.0 --no-ri --no-rdoc
$ rails _5.2.0_ new . --api –T

52. Globalcode – Open4education
Integração com Rails
# Gemfile
gem 'graphql', '~> 1.7.13’
gem ‘graphiql-rails’, '~> 1.4.10', group: :development
## GraphiQL fornece uma interface
## de consulta via browser para GraphQL.
$ bundle install

53. Globalcode – Open4education
Integração com Rails
$ rails generate model
Country abbreviation name
$ rails generate model
User name email phone_number:integer
country:references is_admin:boolean

54. Globalcode – Open4education
Integração com Rails
$ rails db:migrate
$ rails console
Country.create abbreviation: 'BRA', name: 'BRAZIL'
Country.create abbreviation: 'USA', name: 'UNITED STATES OF AMERICA'
User.create name: 'Isaac', email: 'isaac@gmail.com', phone_number: 5556767, country:
Country.first, is_admin: true
User.create name: 'Stephen', email: 'stephen@yahoo.com', phone_number: 5558989, country:
Country.second, is_admin: false
User.create name: 'Albert', email: 'albert@outlook.com', phone_number: 5554545, country:
Country.second, is_admin: false
exit

55. Globalcode – Open4education
Integração com Rails
$ bundle exec rails generate graphql:install
# config/application.rb
# retirar o comentário da linha:
require "sprockets/railtie"

56. Globalcode – Open4education
Integração com Rails
graphqlapp/
app/ config/
controllers/ routes.rb
graphql_
controller.rb
graphql/
mutations/ types/
graphqlapp_
schema.rb
mutation_type.rb query_type.rb

57. Globalcode – Open4education
Integração com Rails
graphqlapp/
app/ config/
controllers/ routes.rb
graphql_
controller.rb
graphql/
mutations/ types/
graphqlapp_
schema.rb
mutation_type.rb query_type.rb

58. Globalcode – Open4education
Integração com Rails
routes.rbgraphql/
mutations/ types/
graphqlapp_
schema.rb
mutation_type.rb query_ype.rb

59. Globalcode – Open4education
Integração com Rails
routes.rbgraphql/
mutations/ types/
graphqlapp_
schema.rb
mutation_type.rb query_type.rb

60. Globalcode – Open4education
Integração com Rails
routes.rbgraphql/
mutations/ types/
graphqlapp_
schema.rb
mutation_type.rb query_type.rb

61. Globalcode – Open4education
Integração com Rails

62. Globalcode – Open4education
Integração com Rails

63. Globalcode – Open4education
Integração com Rails
$ rails server

64. Globalcode – Open4education
Integração com Rails

65. Globalcode – Open4education
Integração com Rails
routes.rbgraphql/
mutations/ types/
graphqlapp_
schema.rb
mutation_type.rb query_type.rb

66. Globalcode – Open4education
Integração com Rails

67. Globalcode – Open4education
Integração com Rails
routes.rbgraphql/
mutations/ types/
graphqlapp_
schema.rb
mutation_type.rb query_type.rb

68. Globalcode – Open4education
Integração com Rails
routes.rbgraphql/
mutations/ types/
graphqlapp_
schema.rb
mutation_type.rb query_type.rb

69. Globalcode – Open4education
Integração com Rails

70. Globalcode – Open4education
Integração com Rails
user

71. Globalcode – Open4education
Integração com Rails
routes.rbgraphql/
mutations/ types/
graphqlapp_
schema.rb
mutation_type.rb query_type.rb user_type.rb

72. Globalcode – Open4education
Integração com Rails
routes.rbgraphql/
mutations/ types/
graphqlapp_
schema.rb
mutation_type.rb query_type.rb user_type.rb

73. Globalcode – Open4education
Integração com Rails

74. Globalcode – Open4education
Integração com Rails
user
idname
email
phone_number
id_admin

75. Globalcode – Open4education
Integração com Rails

76. Globalcode – Open4education
Integração com Rails
user
idname
email
phone_number
id_admin
country

77. Globalcode – Open4education
Integração com Rails

78. Globalcode – Open4education
Integração com Rails

79. Globalcode – Open4education
Integração com Rails
user
idname
email
phone_number
id_admin
country
country

80. Globalcode – Open4education
Integração com Rails
routes.rbgraphql/
mutations/ types/
graphqlapp_
schema.rb
mutation_type.rb query_type.rb user_type.rb country_type.rb

81. Globalcode – Open4education
Integração com Rails

82. Globalcode – Open4education
Integração com Rails
user
idname
email
phone_number
id_admin
country
country
id
abbreviationname

83. Globalcode – Open4education
Integração com Rails

84. Globalcode – Open4education
Integração com Rails

85. Globalcode – Open4education
Integração com Rails
$ curl -XPOST -d 'query={ user(id: 1) {id name}}'
http://localhost:3000/graphql
{"data":{"user":{"id":"1","name":Isaac"}}}

86. Globalcode – Open4education
Integração com Rails
routes.rbgraphql/
mutations/ types/
graphqlapp_
schema.rb
mutation_type.rb query_type.rb user_type.rb country_type.rb

87. Globalcode – Open4education
Integração com Rails

88. Globalcode – Open4education
Integração com Rails

89. Globalcode – Open4education
Integração com Rails
routes.rbgraphql/
mutations/ types/
graphqlapp_
schema.rb
mutation_type.rb query_type.rb user_type.rb country_type.rb

90. Globalcode – Open4education
Integração com Rails
routes.rbgraphql/
mutations/ types/
graphqlapp_
schema.rb
mutation_type.rb query_type.rb user_type.rb country_type.rb
create_user.rb

91. Globalcode – Open4education
Integração com Rails
routes.rbgraphql/
mutations/ types/
graphqlapp_
schema.rb
mutation_type.rb query_type.rb user_type.rb country_type.rb
create_user.rb

92. Globalcode – Open4education
Integração com Rails

93. Globalcode – Open4education
Integração com Rails

94. Globalcode – Open4education
Integração com Rails
query {
user(id: 1) {
name
email
}
}
{
"data": {
"user": {
"name": "Isaac",
"email”:"isaac@gmail.com"
}
}
}

95. Globalcode – Open4education
Integração com Rails
query {
allUsers {
id
}
}
{
"data": {
"allUsers": [
{
"id": "1"
},
{
"id": "2"
}
]
}
}

96. Globalcode – Open4education
Integração com Rails
mutation {
createUser(name: "Steve",
is_admin: true,
email:"jobs@apple.com",
country_id: 1,
phone_number: 55555555)
{
id
}
}
{
"data": {
"createUser": {
"id": "9"
}
}
}

97. Globalcode – Open4education
Integração com Rails
mutation {
updateUser(id: 9,
name:"Steve Jobs”){
name
}
}
{
"data": {
"updateUser": {
"name": "Steve Jobs"
}
}
}

98. Globalcode – Open4education
Integração com Rails
mutation {
deleteUser(id: 9)
}
{
"data": {
"deleteUser": true
}
}

99. Globalcode – Open4education
Finalizando...
Empresas que usam GraphQL
Github
Twitter
Beek.io: a social network for book lovers
Atlassian

100. Globalcode – Open4education
Finalizando...
Empresas que usam GraphQL
Atlassian
Coursera
KLM
Facebook

101. Globalcode – Open4education
Finalizando...
SQL databases x NO SQL databases
==
REST APIs x NO REST APIs
?

102. Globalcode – Open4education
Finalizando...
NO REST API

103. Globalcode – Open4education
Questions?
Thank you
@sergiosouzalima
onebitcode.com/author/sergio-lima
linkedin.com/in/sergiosouzalima

104. Globalcode – Open4education
Referências
http://graphql.org
https://graphql.org/users/
https://onebitcode.com/graphql-introducao/
https://www.howtographql.com/graphql-ruby
https://www.moesif.com/blog/technical/graphql/REST-vs-
GraphQL-APIs-the-good-the-bad-the-ugly/