Tweet
Tweet

Slide 1

Slide 1 text

GraphQL on Rails 2019/01/23 Tokyo Rails#38 Yuki Akamatsu @cookpad

Slide 2

Slide 2 text

Who am I? •Yuki Akamatsu •id: ukstudio •Rails programmer •Working at Cookpad ‣New service development dept.

Slide 3

Slide 3 text

Our project •Named Tabedori ‣たべかたドリル •Improvement cooking skills •Everyone can cooking without recipes

Slide 4

Slide 4 text

Technology stack of Tabedori •Mobile app ‣ React Native + TypeScript •GraphQL Server ‣ Ruby on Rails •Admin tool(CMS) ‣ React.js + TypeScript (SBQI2-4FSWFS .PCJMFBQQ "ENJOUPPM

Slide 5

Slide 5 text

Agenda •What is GraphQL •How to implement GraphQL on Rails

Slide 6

Slide 6 text

What is GraphQL

Slide 7

Slide 7 text

Query language •GraphQL is a query language for Web API ‣ And also server-side runtime • Like Node.js, Rails, AppSync, and other things

Slide 8

Slide 8 text

One endpoint •GraphQL server has only one endpoint •All queries are sent to the endpoint ‣ POST method only ‣ All responses are returned with 200 status $MJFOU 4FSWFS 1045HSBQIRM 3FUVSOSFTQPOTF POMZ

Slide 9

Slide 9 text

GraphQL Query • You can request any fields you need • You don’t need to receive unnecessary data • You can get many resources in a single request • It’s better for performance

Slide 10

Slide 10 text

Error • If there is something wrong, GraphQL server returns a response what contains errors key

Slide 11

Slide 11 text

Type definition •All resources and fields have a type •You can fetch fields what are defined on Type

Slide 12

Slide 12 text

Type is good •There is no mixing of multiple types •Null checking isn’t required ‣ Non-null constraint can be defined by using ! in the schema •Becoming documentation ‣ Can generate documentation from the schema

Slide 13

Slide 13 text

Documentation •You can see documentation using IDE or documentation tools •Documents are very useful for communication between client-side programmers and server-side programmers

Slide 14

Slide 14 text

GrahpiQL •https://github.com/graphql/ graphiql •Graph”i”QL is browser IDE for GraphQL ‣ It can send requests to graphql server •You can see document quickly

Slide 15

Slide 15 text

GraphiQL is awesome •GraphiQL make easy to request to graphql server ‣ You can try any queries easily and interactively •If you use desktop app, I recommend prisma/ graphql-playground ‣ I’m using this

Slide 16

Slide 16 text

graphql-docs •https://github.com/ gjtorikian/graphql-docs •graphql-docs is gem that generate documentation as html from the schema •It might be a good if you want to host static file

Slide 17

Slide 17 text

Public APIs •You can try GraphQL query on these sites •GitHub ‣ https://developer.github.com/v4/explorer/ •SWAPI ‣ https://graphql.org/swapi-graphql/ •And so on ‣ https://github.com/APIs-guru/graphql-apis

Slide 18

Slide 18 text

How to implement GraphQL on Rails

Slide 19

Slide 19 text

graphql-ruby •http://graphql- ruby.org/ •graphql-ruby is probably best way in now

Slide 20

Slide 20 text

Define types and fields •graphql-ruby provides DSL for types and fields definition •You can define Type as Ruby class

Slide 21

Slide 21 text

Define resolver (Query) •Resolver represents a single field •And can be used to fetch data from any data source ‣In this case, fetching from RDB using ActiveRecord •Each user is assigned to UserType

Slide 22

Slide 22 text

Define resolver (User) •“object” is provided graphql-ruby •“object” is passed from parent type ‣In this case, “object” is User instance •If resolver isn’t defined, delegate to “object” by default ‣It means resolver is optional ‣In other words, these resolvers in this example are unnecessary

Slide 23

Slide 23 text

It works •This is the end of the minimal implementation •I didn’t tell you about some processes ‣ e.g. You need to execute “rails g graphql:install” •What matters is defining types and resolvers

Slide 24

Slide 24 text

Need to solve N+1 problem •The example has N+1 problem •If There are 20 users, this query calls select query from posts 20 times ‣It’ too bad

Slide 25

Slide 25 text

Bad way •Use eager_load to single query to DB •It is becoming unnecessary cost if you don’t need posts

Slide 26

Slide 26 text

graphql-batch •https://github.com/Shopify/graphql-batch •graphql-batch provides an executor which allows queries to be batched •It’s inspired by DataLoader created by Facebook

Slide 27

Slide 27 text

AssociationLoader •Implement AssociationLoader ‣You can copy from graphql-batch’s repository •Just use AssociationLoader

Slide 28

Slide 28 text

Why was it solved? •In brief, graphql-batch collects user’s id at first. •Then execute batched query ‣ “where(user_id: collected_user_id)” IUUQTFOHJOFFSJOHTIPQJGZDPNCMPHTFOHJOFFSJOHTPMWJOHUIFOQSPCMFNGPSHSBQIRMUISPVHICBUDIJOH

Slide 29

Slide 29 text

Pagination •I recommend to using connection_type ‣ Pros: easy to implementation ‣ Cons: provides only Relay cursor-based pagination •You need to implement by yourself If you want to use another way

Slide 30

Slide 30 text

Relay cursor-based pagination •Relay is framework of GraphQL created by Facebook •Cursor-based is suited for infinity scroll $VSTPS $VSTPS PQBRVF$VSTPS $VSTPS $VSTPS $VSTPS

Slide 31

Slide 31 text

connection_type •Any object type has connection_type method •Just use connection_type instead of [] in type specification

Slide 32

Slide 32 text

Conclusion •What is GraphQL ‣ GraphQL is query language for Web API ‣ GraphQL is strongly typed •How to implement GraphQL on Rails ‣ You would use graphql-ruby and graphql-batch ‣ connection_type is a way of pagination

Slide 33

Slide 33 text

Thank you •There are some topics I didn’t talk ‣ How to create/update/destroy data ‣ Uploading images, Error handling, Designing schema, and so on •The presentation may be insufficient due to my english ability •Please feel free to ask me in FAQ or after this talk ‣ Please could you speak slowly and simply