Intro to GraphQL

Intro to GraphQL

Vol01 Feb102017

Hiroto Fukui

EC Marketplace RMS Development Department

Rakuten Inc

httpwwwrakutencojp

2

Typical REST API

REST API

Server

Client

application

GET itemitemId=XXX

item

itemId ldquoXXXXXrdquo

hellip

payment

paymentMethodId ldquoXXXrdquo

campaign

campaignId ldquoXXXrdquo

hellip

3

Common issues for REST API

bull Over fetching

o GEThelliporderresponseField=shippingampresponseField=payment

ampresponseField=promotion

o GET hellipuser rarr GET helliporders rarr GET hellipitem

bull Multiple IFs for multiple clients

o GET item GET mobileitem

bull Non-detailed error message in 4XX response

o POST order -gt ldquostatusrdquo 400 ldquomessagerdquo ldquobad requestrdquo

bull Managing API design changes

o Versioning

o Deprecation

o Documentation

4

GraphQL

ldquoGraphQL is a query language for your

API and a server-side runtime for

executing queries by using a type system

you define for your datardquo

httpgraphqlorglearn

5

History

bull Developed by facebook in 2012 for internal usage

bull Specification became RFC in 2015

- ldquoThis year(2015) weve begun the process of open-sourcing GraphQL

by drafting a specification releasing a reference implementation and

forming a community around it at graphqlorgrdquo

from blog post on codefacebookcom

bull Exploring GraphQL - Lee Byron React Europe 2015

bull Doc httpgraphqlorg

bull Implementations httpsgithubcomgraphql

6

GraphQL Approach

Gra

ph

QL

Client

application

Type1- Field 1

- Field 2

Type2- Field 3

- Field 4

Type1- Field 1

- Field 2

Type2- Field 3

- Field 4

runtime1

runtime2

runtime3

runtime4

- Parse

- Type Validation

My App

7

An real example1

httpapiendpointgraphqlquery= player(playerName Ash) name age items

name quantity

8

An real example2

httpapiendpointgraphqlquery= player(playerName Ash) name age

9

Type

10

Alias

11

Validation

12

Versioning

13

Relay

bull A javascript framework for React that work with GraphQL

bull Naturally integrate GraphQL API call into React component

bull Manage cache pagination object identification

14

Demo Time

bull Incrementally build applications

bull From HelloWorld to calling GraphQL API from Relay app

15

When you should do should not do

Should

bull When you build brand new UI application with brand new API

application

bull When you tired of maintaining document up-to-date

bull When you answered inquiries from your clients 100 times

bull When you got to build hellipv3itemhellip

Should not

bull When you already got many conservative clients

bull When you have no time to maintain both REST and GraphQL during

migration

16

References

bull Learning GraphQL and Relay by Samer Buna

bull GraphQL official doc

bull Relay official doc

bull GraphQL with Sangria