Slide 1

Slide 1 text

GoͰGraphQLαʔόΛཱͯΔͧʂ mercari.go #2 Θ͔Ί ·͞ͻΖ #mercarigo bit.ly/2vyiluP

Slide 2

Slide 2 text

Θ͔Ί ·͞ͻΖ @v vakame Masahiro Wakame GAE/Go TypeScript ٕज़ॻయ

Slide 3

Slide 3 text

TL;DR •GraphQLͬͯԿʁ •GitHub v4 APIΛ৮ͬͯΈΔ •github.com/99designs/gqlgen •ઃܭϕετϓϥΫςΟε ΫϥΠΞϯτͷ࿩͸͠ͳ͍

Slide 4

Slide 4 text

GraphQLͬͯԿʁ ࡉ͔͍͜ͱ͸ ࠷ޙͷࢀߟࢿྉूͰʂ

Slide 5

Slide 5 text

GraphQLͬͯԿʁ •Facebook͕2015೥ʹެ։ͨ͠࢓༷ •άϥϑߏ଄ʹର͢ΔQuery Language •༑ୡͷ༑ୡΛ5ਓͣͭऔಘ͢Δͱ͔ •Client→Serverͷσʔλཁٻ࣌ʹ࢖͏

Slide 6

Slide 6 text

GraphQLͬͯԿʁ RESTͳΒ3RPCඞཁ
 GraphQLͳΒ1ճ { circle(id: "Q2lyY2xlRXhoaWJpdEluZm86MTIzNAo") { name spaces penName webSiteURL genre genreFreeFormat products(first: 9) { pageInfo { hasNextPage endCursor } nodes { name description type page price relatedURLs firstAppearanceEventName firstAtTechBookFest images { url height width } } } loginUserChecked { checked } } }

Slide 7

Slide 7 text

େࣄͳ͜ͱ •ΘΓͱ੍໿͋Δ (N+1ରࡦͱ͔) •ແݶʹૣ͘ͳ͍ •REST APIͷ্Ґޓ׵Ͱ͸ͳ͍ •ࠩҟΛΑ͘ཧղ͠Α͏

Slide 8

Slide 8 text

ϝϧΧϦͰ࢖ͬͯΔʁ •C Sπʔϧ PHP+webonyx/graphql-php •US ϝϧΧϦWeb ??? •MicroserviceԽ CSπʔϧ Go+gqlgen •ϝϧΧϦWeb Node.js+Apollo •ϝϧϖΠ CSπʔϧ(ݕ౼த) Go+gqlgen ٕज़ॻయWeb΋࣮ݧதͰ͢

Slide 9

Slide 9 text

ClientͷྲྀΕ •·ͣSchema(+αʔό)͕͋Δ •ͦ͜ʹOperationΛ౤͛Δ •Query, Mutation, Subscribe ͷ3छ •ཁٻͨ͠௨ΓͷܗࣜͰσʔλདྷΔ

Slide 10

Slide 10 text

Queryͷྫ { viewer { id login name location bio company repositoriesContributedTo(first: 2) { nodes { owner { login } name } } } } { "data": { "viewer": { "id": "MDQ6VXNlcjEyNTMzMg==", "login": "vvakame", "name": "Masahiro Wakame", "location": "Tokyo, Japan", "bio": "TypeScript and GAE/Go", "company": "Merpay, Inc.", "repositoriesContributedTo": { "nodes": [ { "owner": { "login": "mruby" }, "name": "mruby" }, { "owner": { "login": "DefinitelyTyped" }, "name": "DefinitelyTyped" } ] } } } } ରԠͨ͠ߏ଄͕ฦΔ

Slide 11

Slide 11 text

ClientͷྲྀΕ •ͭ·Γ… •ΫΤϦʹΑͬͯಘΒΕΔσʔλ͕มΘΔ •ΫΤϦݸผʹฦΓ஋ͷσʔλͷܕཉ͍͠ •→ݴޠʹΑͬͯ͸࢖͍ͮΒ͍Մೳੑʁ ·͊JSͱ૬ੑྑͦ͞͏ͳͷ͸Θ͔Δ

Slide 12

Slide 12 text

ͬ͘͟ΓServerݪཧ •Query͕དྷΔ •ฦ͢σʔλ͸Treeߏ଄ʹͳΔ •Treeͷઅ(ͱ͔)ຖʹResolverΛఆٛ͢Δ •Resolver͕ཁٻ͞ΕͨNodeΛੜ੒͠ฦ͢ •Resolverͷू߹ == αʔόͷ࣮૷

Slide 13

Slide 13 text

ͬ͘͟ΓServerݪཧ type ResolverRoot interface { Query() QueryResolver User() UserResolver CircleExhibitInfo() CircleExhibitInfoResolver ProductInfo() ProductInfoResolver } type QueryResolver interface { Circle(ctx context.Context, id string) (*CircleExhibitInfo, } type CircleExhibitInfoResolver interface { ID(ctx context.Context, obj *CircleExhibitInfo) (string, err Products(ctx context.Context, obj *CircleExhibitInfo, first } type ProductInfoResolver interface { ID(ctx context.Context, obj *ProductInfo) (string, error) Images(ctx context.Context, obj *ProductInfo) ([]Image, erro } query { circle(id: "Q2lyY2xlRXhoaWJpdEluZm86MTIzNAo") { name spaces penName webSiteURL genre genreFreeFormat products(first: 9) { pageInfo { hasNextPage endCursor } nodes { name description type page price relatedURLs firstAppearanceEventName firstAtTechBookFest images { url height width } } } loginUserChecked { checked } }

Slide 14

Slide 14 text

ͬ͘͟ΓServerݪཧ Resolverͷू߹ ʹ αʔόͷ࣮૷

Slide 15

Slide 15 text

͜͜޷͖ •୯ҰΤϯυϙΠϯτ •Introspection •SchemaΛ஌Δʹ΋GraphQL͕࢖͑Δ •ڧ͍ܕ෇͚ʂ

Slide 16

Slide 16 text

GitHub v4 APIΛ৮Δ

Slide 17

Slide 17 text

৮Γ·͠ΐ͏ •developer.github.com/v4/explorer/ •GraphiQLʹ৮ΕΔ •GitHubͷߟ͑ͨ࠷ڧͷઃܭʹ৮ΕΔ •͋ΘΑ͘͹࢖ͬͯΈΔ

Slide 18

Slide 18 text

σϞ •ϩάΠϯϢʔβͷ໊લग़͢ •೚ҙͷϦϙδτϦ͕࡞ΒΕͨ೔ग़͢ •GraphQLʹؔ࿈ͷ͋ΔUserΛநग़͢Δ

Slide 19

Slide 19 text

ίʔυ͔Β •ద౰ʹPOST͢Δ͚ͩ •Authorization: bearer ${PersonalAccessToken} •https://api.github.com/graphql •https://github.com/settings/tokens bit.ly/2Oo8DlD

Slide 20

Slide 20 text

github.com/99designs/gqlgen I’m committer!

Slide 21

Slide 21 text

ͳͥGoͳͷ͔ʁ •Go͸΍͍͠ฒߦॲཧ؆୯ͩ͠ •Microservice܈͕GoͳͷͰ…ʂ •GAE/GoͰಈ͘ͷͰ…ʂ •ࣾ಺ʹ͸PHP੎΍Node.js੎΋͍·͢ •Frontend Engineer؅׋

Slide 22

Slide 22 text

GoओཁϥΠϒϥϦൺֱ •github.com/graph-gophers/graphql-go •github.com/graphql-go/graphql •github.com/samsarahq/thunder •github.com/99designs/gqlgen

Slide 23

Slide 23 text

GoओཁϥΠϒϥϦൺֱ •github.com/graph-gophers/graphql-go •github.com/graphql-go/graphql •github.com/samsarahq/thunder •github.com/99designs/gqlgen ػೳ͕ͪΐͬͱශऑ GoͷίʔυͰSchemaॻ͖ͨ͘ͳ͍ ಉ্ ΘΓͱྑͦ͞͏ʁ

Slide 24

Slide 24 text

ͳͥgqlgen͔ʁ •ϘΠϥʔϓϨʔτ͸ݏʂ •׬શίʔυੜ੒΋ݏʂ •ίʔυੜ੒+खॻ͖ΛఔΑ͘… •ΑΖ͍͠ͳΒ͹gqlgenͩʂ

Slide 25

Slide 25 text

gqlgen͸ྑ͍ͷ͔ʁ ྑ͘͠·ͨ͠❤ Ͱcommitterʹͳͬͨ

Slide 26

Slide 26 text

gqlgenͷαϙʔτൣғ •Query •Mutation •Subscription •Directive •import syntax •type extend ͋Δ ΄͍͠ ͦͷ͏ͪ΍Γ·͢ committer͔ͩΒͶ

Slide 27

Slide 27 text

σϞ •gqlgen init ͯ͠ΈΔ •มߋΛՃ͑ͯΈΔ •gqlgen gen ͯ͠ΈΔ •࣮ࡍʹୟ͍ͯΈΔ ࣌ؒ…͋Δʁ gqlgen.com/ getting-started/

Slide 28

Slide 28 text

ύʔπͷղઆ •Resolver •Directive •Middleware •ErrorPresenter

Slide 29

Slide 29 text

ύʔπͷղઆ •Resolver •Directive •Middleware •ErrorPresenter ੜ੒͞Εͨinterface࣮૷ͯ͠ʂ ੜ੒͞ΕͨDirectiveʹ࣮૷Λ༩͑ͯʂ ద౰ʹϩΪϯάͱ͔ʹ࢖͑·͢ ΤϥʔͷΧελϚΠζͰ͖·͢ gitter.im/gqlgen/Lobby gqlgen.com

Slide 30

Slide 30 text

Middleware •ResolverMiddleware •Resolverͷಈ࡞લޙʹॲཧΛڬΉ •RequestMiddleware •Req,RespʹॲཧΛڬΉ(ओʹϩΪϯά) bit.ly/2MmjbEE

Slide 31

Slide 31 text

ઃܭϕετϓϥΫςΟε ຊ౰ʹϕετ͔͸͠ΒΜʂ

Slide 32

Slide 32 text

RelayΛษڧ͢΂͠ •RelayΛ࠾༻͠ͳͯ͘΋ษڧͯ͠ •Server͚ͩߟ͑ΔͱΠϛϑͳ࢓༷͕͋Δ •ओʹFragmentपΓ •UIଆΛඒ͘͠ઃܭ͢ΔͨΊ TSαϙʔτ͖ͨ github.com/facebook/relay/pull/2293

Slide 33

Slide 33 text

RelayΛษڧ͢΂͠ •Relay spec 3ܑఋ •cursor, global object, input object •specຊମ͡Όͳ͍ͷͰཤमಀ͕ͪ͠ •GitHub΋౿ऻ͍ͯ͠Δ •bit.ly/2npeSdv

Slide 34

Slide 34 text

N+1໰୊ •Πϕϯτ3ͭ×αʔΫϧ100݅×൦෍෺9ݸ •1+3×1+3×100×1 = 304ճͷDBΞΫηε •ؤுͬͯ࠷దԽ͢Δͱ 1+1+1 ??

Slide 35

Slide 35 text

N+1໰୊ •gqlgen͸ResolverΛฒྻॲཧ͢Δ •→ू໿͕೉͍͠ʂ •github.com/vektah/dataloaden •ࢦఆظؒͷϦΫΤετΛҰׅԽ •·ͩະධՁ… ྑ͍ํ๏ࢥ͍ͭ͘ʁ

Slide 36

Slide 36 text

REST APIͱͷରൺ •REST API = RPC •GraphQL = QueryLanguage •Τϥʔʹର͢Δߟ͑ํ͕ࠜຊతʹҧ͏ •“ਖ਼͍͠Requestͷ౤͛ํ” ͱ͍͏֓೦ •ڻ͖࠷খͷݪଇ & σόοΨϏϦςΟ

Slide 37

Slide 37 text

REST APIͱͷରൺ •Τϥʔʹର͢Δߟ͑ํϚδॏཁ •େࣄͳ͜ͱͳͷͰ2ճݴ͍·ͨ͠ •GraphiQLͰ׬݁͢ΔσόοΨϏϦςΟ •੍ޚ͸ͳΔ΂͘DirectiveϨϕϧͰ ϑϧεΫϥονͰ͖ΔͳΒͦΕ͕Α͍

Slide 38

Slide 38 text

Schemaઃܭ •Schema͔ΒಡΈऔΕΔ৘ใΛ૿΍͢ •DirectiveΛ࢖ͬͨScope੍ޚͱ͔ •DBͷ1table=1typeʹ͢Δͱ͔ •มʹ߹ମͤͨ͞Γ෼ׂͨ͠Γ͠ͳ͍

Slide 39

Slide 39 text

AuthपΓ •ಛʹܾ·ͬͨ࢓༷͕ͳ͍ •ͷͰɺී௨ʹHTTP͢Δ •ηογϣϯ, OAuth2 etc…

Slide 40

Slide 40 text

·ͩΘ͔ΒΜ

Slide 41

Slide 41 text

ςετͲ͏͢Δʁ •ࠓͷͱ͜Ζgolden testingͯ͠Δ •Resolver, DirectiveΛݸผʹςετʁ

Slide 42

Slide 42 text

Mock? •αʔόଆ࣮૷͕͋ͱʹͳΔ৔߹ •ΫϥΠΞϯτଆʹͲ͏ ָͤ͞Δ΂͖ʁ

Slide 43

Slide 43 text

BFF vs ௚࣮૷ •جຊ௚࣮૷ͷ΄͏ָ͕ͦ͏ •Backend Engineerతʹ͸ •Microserviceͷͱ͖ʁ •݁ہBFFతଘࡏʹͳΔͷͰ͸…ʁ

Slide 44

Slide 44 text

ӡ༻ͷ࿩ •ϝτϦΫεऔΓ͍ͨʁ •ϩάऔΓ͍ͨʁ •stats෼ੳ͍ͨ͠ʁ

Slide 45

Slide 45 text

ΫϥΠΞϯτଆϫʔΫϑϩʔ •ͳʹ΋͔΋Θ͔ΒΜ •ಛʹAndroid, iOSͷ஌ݟ͕ͳ͍ •Web͸ద౰ʹ΍ͬͯ΄͍͠

Slide 46

Slide 46 text

ࢀߟࢿྉ

Slide 47

Slide 47 text

ࢀߟࢿྉू •b.hatena.ne.jp/vvakame/GraphQL •graphql.org •www.howtographql.com •ٕज़ॻయ5Ͱຊग़͢…ʁ(མͪͳ͍Ͱ ͜Ε͖͢

Slide 48

Slide 48 text

͓͠·͍