すばらしきGraphQLのSEKAIへようこそ

by FUJI Goro

Slide 1

Slide 1 text

͢͹Β͖͠ GraphQLͷSEKAI΁Α͏ͦ͜ DroidKaigi 2018, day 2, 14:50-15:20 gfx at Bit Journey, Inc.

Slide 2

Slide 2 text

ࣗݾ঺հ • ໊લ: gfx (FUJI Goro) • ॴଐ: Bit Journey, Inc. • ؔΘ͍ͬͯΔϓϩμΫτ: Kibela • ৘ใڞ༗πʔϧ / Wiki • લճͷDroidKaigiͰ͸ʮORMͷબͼํʯͰͨ͠

Slide 3

Slide 3 text

ࣗݾ঺հ

Slide 4

Slide 4 text

Kibela

Slide 5

Slide 5 text

Kibela Web API • GraphQLΛ࠾༻ • ಺෦APIͱͯ͠͸Ұ෦ಋೖࡁΈ • ެ։༻APIͱͯ͠΋࠾༻༧ఆ • 2018೥தʹ͸ެ։͍ͨ͠ • ϞόΠϧ༻API΋౰વGraphQL • ΞϓϦ͸React NativeͰ࣮૷༧ఆʢ༧ఆ͕஗Ε͓ͯΓະணखʣ

Slide 6

Slide 6 text

Agenda • SDD: Schema-Driven Developmentʹ͍ͭͯ • GraphQLͱ͸Կ͔ • GraphQL in Android • With Java / Kotlin • With React Native

Slide 7

Slide 7 text

SDD: Schema-Driven Development • SchemaʢʹAPIͱσʔλߏ଄ͷఆٛʣͱϩδοΫͷ։ ൃΛಉ࣌ʹਐΊΔ͜ͱ • αʔόʔαΠυͱΫϥΠΞϯταΠυͰschemaΛϕʔε ʹίϛϡχέʔγϣϯ͠΍͍͢ • ΫϥΠΞϯταΠυ͸schemaͷมߋΛ௥͏͜ͱͰαʔ όʔαΠυͷ࢓༷มߋʹ௥ै͠΍͍͢ • Schema͔Βͷίʔυੜ੒Ͱܕ҆શͳίʔυΛॻ͚Δ

Slide 8

Slide 8 text

DroidKaigi 2018ͱSDD • Web APIͷSDDޚࡾՈ͕੎ἧ͍ʂʂ • ·ͩAPIఆٛ؅ཧͰফ໣ͯ͠ΔͷʁʙSwaggerΛ༻ ͍ͨେن໛ΞϓϦ࣌୅ͷAPIఆٛ؅ཧͱίʔυδΣ ωϨʔτʙ • gRPCͱProtocol BuffersͰ࡞ΔɺҰຯҧ͏௨৴पΓ • ͢͹Β͖͠GraphQLͷSEKAI΁Α͏ͦ͜

Slide 9

Slide 9 text

yugui, 2018 ࠓ͞ΒProtocol BufferͱɺखʹೃછΉಓ۩ͷ࿩ https://qiita.com/yugui/items/160737021d25d761b353 “ࣗ෼ͷ؅׋ྖҬ಺ʹดͨ͡σʔλߏ଄Ͱ͋Ε͹ɺ εΩʔϚͱ͔ܕએݴͱ͔ࡉ͔͍റΓͳ͠Ͱܰྔʹ ਐΊΔͷ΋͋Γͩɻ͔͠͠ɺଞਓͷྖҬͱͷք໘ ͸͔ͬ͠Γఆ͓͍ٛͯͨ͠ํ͕ྑ͍ɻεΩʔϚఆ ٛͱ͍͏੫ۚΛࢧ෷Θͳ͍ͱͦͷ෼ͷπέ͸Ͳ͜ ͔Ͱճ͖ͬͯͯɺ1ֻ͔࣌ؒΔE2Eςετ͕͚͜Δ ͱ͔ɺि࣍มߋϨϏϡʔ߹ಉձٞͷൃ଍ͱ͔ɺͦ ͏͍͏΍ͭͰࢧ෷͏͜ͱʹͳΔɻ”

Slide 10

Slide 10 text

GraphQLͱ͸Կ͔

Slide 11

Slide 11 text

GraphQLʹ͍ͭͯ • Facebook͕։ൃ͍ͯ͠ΔΫΤϦݴޠ • ϦιʔεऔಘʹಛԽͨ͠Web API࢓༷ͱ͍͑Δ • Web API ͳͷͰ௨৴ϓϩτίϧ͸HTTP • ೝূ΍response bodyͷѹॖͳͲ͸HTTPʹ४ͣΔ • ಺෦APIͱͯ͠΋֎෦APIͱͯ͠΋༗ޮ

Slide 12

Slide 12 text

“ϦιʔεऔಘʹಛԽͨ͠Web API” • Ϧιʔεऔಘܥ͕ඇৗʹॊೈ͔ͭڧྗ • Ϧιʔεߋ৽ܥ͸ϝιουΛఆٛͯ͠ݺͿײ ͡ʹͳΔͷͰGraphQLͰ͋ΔϝϦοτ͸গͳ ͍ • “ϦιʔεͷऔಘʹGraphQLΛ࢖ͬͯߋ৽͸ RESTͰ”ͱ͍͏ͷΛఏএ͢Δਓ΋͍ΔϨϕϧ

Slide 13

Slide 13 text

GitHubͷGraphQL APIΛ GaphiQLͰோΊΔ

Slide 14

Slide 14 text

GraphiQLʢάϥϑΟΫϧʣ • The GraphQL IDE • ཁ͢ΔʹAPI console / API explorer • ิ׬͕ޮ͘͏͑ʹυΩϡϝϯτϏϡʔΞ಺ଂ • GraphiQL͕͋Δ͔ΒGraphQLΛ࢖͏ͱ͍͏Ϩ ϕϧͷڧྗͳπʔϧ

Slide 15

Slide 15 text

σϞ / movie

Slide 16

Slide 16 text

GraphQLͷ༷ࢠ with GitHub Ϩεϙϯε +40/ ϦΫΤετ (SBQI2-

Slide 17

Slide 17 text

GraphQLͷ༷ࢠ with GitHub

Slide 18

Slide 18 text

GraphQLͷ༷ࢠ with GitHub

Slide 19

Slide 19 text

GraphQLͷ༷ࢠ with GitHub

Slide 20

Slide 20 text

GraphQLͷ༷ࢠ with GitHub %#ΧϥϜͷ஋Ͱ͸ͳ͘ Ճ޻ࡁΈͷϑΟʔϧυʂ

Slide 21

Slide 21 text

GraphQLͷ༷ࢠ with GitHub ϦΫΤετΛΈΕ͹ Ϩεϙϯεͷߏ଄͕Θ͔Δʂ

Slide 22

Slide 22 text

GraphQLͷ༷ࢠ with GitHub υΩϡϝϯτϏϡʔΞ෇͖ʂ

Slide 23

Slide 23 text

GraphQLͷ༷ࢠ with GitHub SPPUʹఆٛ͞Ε͍ͯΔͷ͸େ఍ ͷ৔߹RVFSZͱNVUBUJPOͷΈ

Slide 24

Slide 24 text

GraphQLͷ༷ࢠ with GitHub ͜͜Ͱྫʹ࢖͍ͬͯΔ SFQPTJUPSZϑΟʔϧυ͸ PXOFSͱOBNΛҾ਺ʹͱΓ 3FQPTJUPSZܕΛฦ͢ͱͷ͜ͱ

Slide 25

Slide 25 text

GraphQLͷ༷ࢠ with GitHub 3FQPTJUPSZܕͷৄࡉ ࣮૷͍ͯ͠ΔΠϯλʔϑΣΠε ଘࡏ͢ΔϑΟʔϧυ

Slide 26

Slide 26 text

͜͜·Ͱͷ·ͱΊ • ϦΫΤετ͔ΒϨεϙϯεͷߏ଄͕෼͔Δ • ΞϓϦέʔγϣϯ͕ͦͷ৔ͰඞཁͳϑΟʔϧυ ͚ͩΛϦΫΤετ͢ΔͨΊ༨ܭͳܭࢉ͕ෆཁ • ͨͱ͑͹ઌͷྫͩͱ “descriptionHTML” ͸ ෆཁͳͱ͖͸ϦΫΤετ͠ͳ͍͜ͱͰαʔόʔ αΠυͰͷܭࢉΛ࡟ݮͰ͖Δ

Slide 27

Slide 27 text

ܕγεςϜ • جຊܕ + ഑ྻ + Ϋϥε + ΠϯλʔϑΣΠε • جຊܕ͸Int, Float, Boolean, String, ID • Ϋϥε͸෮਺ͷΠϯλʔϑΣΠεΛ࣮૷Ͱ͖Δ • ΠϯλʔϑΣΠε͸JavaͷͦΕͱ΄΅ಉ͡ • શͯͷܕ͸non-nullʹͰ͖Δ (e.g. String!)

Slide 28

Slide 28 text

Mutation • Ϧιʔεߋ৽ܥͷΫΤϦλΠϓ • ࣗ༝ʹ໊લΛ͚ͭΒΕΔͷͰɺRESTͷPOST/ PUT/PATH/DELETEͷ͜ͱ͸๨ΕͯΑ͍

Slide 29

Slide 29 text

Relay 1. Facebook͕։ൃ͍ͯ͠ΔGraphQLΛલఏͱ͠ ͨView Frameworkͷ͜ͱ 2. Relay (1) ͕αʔόʔʹରͯ͠ٻΊΔ࢓༷Ͱ͋ ΔRelay Server Speciﬁcationͷ͜ͱ • GraphQLίΞʹෆ଍͢Δ෦෼Λิ׬͢Δ࢓ ༷ͳͷͰशಘඞਢ

Slide 30

Slide 30 text

Relay Connection • ϦιʔεϦετͷϖʔδϯάΛఆΊͨ࢓༷ • edges: ϦετͷεϥΠεΛද͢഑ྻ • node: Ϧετͷ1ཁૉ

Slide 31

Slide 31 text

ͳͥRelay Connection͕ඞཁ͔ • ϦετͷεϥΠεͰ͋Δ഑ྻΛฦ͍ͨ͠ • ೚ҙͷϝλσʔλΛฦ͍ͨ͠ • ͭ·Γੜͷ഑ྻΛฦ͢Θ͚ʹ͸͍͔ͳ͍ • ͦ͜Ͱ edges / node ͱ͍͏૚Λઃ͚ͨ

Slide 32

Slide 32 text

Relay Connection in GitHub WJFXFSDVSSFOUVTFSͷ lQVCMJDSFQPTJUPSJFT͔Β࠷৽ͭ ͨͩ͠GPSLΛআ͘z

Slide 33

Slide 33 text

Relay Connection in GitHub ΧελϜϝλσʔλ

Slide 34

Slide 34 text

Relay Connection in GitHub ഑ྻʹؔͯ͠͸ΫΤϦͷߏ଄͔Β ࣗ໌Ͱ͸ͳ͍͕ʜ

Slide 35

Slide 35 text

Relay Connection in GitHub

Slide 36

Slide 36 text

Relay Connection in GitHub

Slide 37

Slide 37 text

ΫΤϦ͸खॻ͖ʁ • खॻ͠Ζͱ͍͏ઃܭҙਤΛόϦόϦײ͡Δ • ΫΤϦͷߏ଄͕Ϩεϙϯεͷߏ଄ΛܾΊΔ͔Β • ΑͬͯɺϨεϙϯεͷσʔλܕΛίʔυੜ੒͢ ΔͳΒΫΤϦ͸੩తͰͳ͚Ε͹ͳΒͳ͍ • GraphiQL͕͋Ε͹ۤͰ͸ͳ͍΋ͷͷཧ૝తʹ͸ ࢖͍׳ΕͨΤσΟλͰॻ͖͍͕ͨ…

Slide 38

Slide 38 text

͜͜·Ͱͷ·ͱΊ • GraphQL: Web API༻ͷΫΤϦݴޠ • GraphiQL: GraphQL༻ͷAPI console • Relay: View FrameworkͱͦΕ͕ཁٻ͢Δαʔόʔ ͷ࢓༷ • Relay Connection: ϖʔδϯάՄೳͳϦετͷ࢓༷

Slide 39

Slide 39 text

GraphQL in Android

Slide 40

Slide 40 text

Apollo - GraphQL client • JS / Android / iOS ༻ͷApollo client͕͋Δ • Apollo for Android͸JavaΛ૝ఆ • ΫΤϦ͔ΒJavaίʔυΛੜ੒͢ΔϥΠϒϥϦ • ΫΤϦ͕ද͢σʔλߏ଄ͷΫϥεΛੜ੒͢Δ

Slide 41

Slide 41 text

ΫΤϦ͔ΒίʔυΛੜ੒͢Δ • ίʔυ͔ΒΫΤϦΛੜ੒͢ΔͷͰ͸ͳ͍ • OrmaͳͲͷORM͸ίʔυ͔ΒΫΤϦΛੜ ੒͕ͪ͠ • ͳͥͳΒɺΫϥεΛੜ੒͢ΔͨΊʹΫΤϦ͕ ੩తͰͳ͍ͱ͍͚ͳ͍͔Β

Slide 42

Slide 42 text

Apollo for Android ˣίʔυੜ੒

Slide 43

Slide 43 text

Apollo for Android • ΫΤϦ͝ͱʹΫϥε܈Λੜ੒͢Δ • ϦΫΤετΫϥε • ϨεϙϯεΫϥε • HTTP௨৴෦෼͸OkHttpʹґଘ

Slide 44

Slide 44 text

Apollo for Android • ͋·Γ࢖ͬͯͳ͍ͷͰͬ͘͟Γॴײ • GraphQL query͸ରԠ͢Δviewͱಉ͡ϑΝΠϧʹஔ ͖͍͕ͨɺApolloͷ৔߹ *.graphql ʹॻ͘ͷ͕ෆศ • KotlinͩͬͨΒ෮਺จࣈྻϦςϥϧ͕͋ΔͷͰ view componentʹqueryΛॻ͘ͷ͸ϫϯνϟϯ ͋Γͦ͏

Slide 45

Slide 45 text

JavaScript / TypeScript • Relay • Apollo • ੜGraphQLͰ΋ී௨ʹ࢖͑Δ • Kibela (web) ͸ੜGraphQLͰ΍͍ͬͯΔ

Slide 46

Slide 46 text

Relay • “A JavaScript framework for building data- driven React applications” • σʔλͷྲྀΕ͸Fluxͱಉ͡ • View componentͱqueryΛಉ͡ϑΝΠϧʹॻ͘ • ͳͥͳΒʮͦͷviewʹͱͬͯඞཁͳσʔλʯΛ աෆ଍ͳ͘஌͍ͬͯΔͷ͸ͦͷview͚͔ͩͩΒ

Slide 47

Slide 47 text

Relayͷงғؾ

Slide 48

Slide 48 text

Relayͷงғؾ 3FBDU$PNQPOFOU

Slide 49

Slide 49 text

Relayͷงғؾ (SBQI2-ΫΤϦ

Slide 50

Slide 50 text

Relayͷงғؾ 3FMBZ2VSZ3FOEFSFSͷSFOEFSͰ σʔλ͔ΒW%0.Λߏஙͯ͠ฦ͢

Slide 51

Slide 51 text

Relay does not meet TypeScript • KibelaͰ͸͓ͦΒ͘Relay͸࢖Θͳ͍ • ͳͥͳΒTypeScriptͱͷ૬ੑ͕ѱ͍͔Β • ύονΛ౰ͯͳ͍ͱϏϧυͰ͖ͳ͍Ϩϕϧ • queryͱviewΛରԠͤ͞Δͱ͍͏ൃ૝͸Α͍ͷ Ͱͦͷൃ૝͚ͩࢀߟʹ͢Δ

Slide 52

Slide 52 text

Ϟσϧ͸ʁ෗ഊ๷ࢭ૚͸ʁ • GraphQLΛ࢖͏ͱ͖͸ʮview component͕ඞཁͳ ϑΟʔϧυ͚ͩΛϦΫΤετͯͦ͠ͷσʔλΛview ʹຒΊΔʯΈ͍ͨͳΞʔΩςΫνϟ͕Αͦ͞͏ • Ϟσϧ΍෗ഊ๷ࢭ૚ͱ͍͏֓೦͸ෆཁͳͷͰ͸…ͱ ࢥ͍ͬͯΔ • ·ͩʮࣗ෼ͰAPIΛ։ൃ͠ͳ͕ΒviewΛ૊Ήʯ͜ ͱ͔ͯ͠͠ͳ͍ͷͰ͜ͷล͸ະ஌਺Ͱ͸͋Δ

Slide 53

Slide 53 text

εΩʔϚΛαόΫϥͰڞ༗ʁ • GraphQL API͸εΩʔϚΛΤϯυϙΠϯτͰε ΩʔϚΛฦ͢ • ίʔυੜ੒ʹ͸εΩʔϚ͕ඞཁͳͷͰɺϏϧυ ࣌ʹΤϯυϙΠϯτΛୟ͍ͯεΩʔϚΛऔͬͯ ͘Δ • ͜ͷͱ͖ΤϯυϙΠϯτΛϩʔΧϧʹ͢Ε͹ ։ൃ൛ͷར༻΋Մೳ

Slide 54

Slide 54 text

ଞͷWeb APIख๏΁ͷॴײ

Slide 55

Slide 55 text

vs RESTful API / Swagger • RESTful͸ݸਓతʹ͸ʮWeb APIΛແཧ΍Γ HTTPʹ৐͍ͤͯΔʯײ͕͋ͬͯͭΒ͍

Slide 56

Slide 56 text

vs RESTful API / Swagger • ಉ͡HTTPεςʔλείʔυʹ෮਺ͷҙຯΛ࣋ͨͤͨ݁Ռ࢖͍෺ʹͳΒͳ ͍͜ͱ͕͠͹͠͹ • OAuth scope͕଍Γͳ͍ͱ͖΍ϩάΠϯϢʔβͷݖݶ͕ͳ͍ͱ͖ʹ 403Λฦͨ͠Γ͢ΔͷͰ403Ͱ෼ذͨ͋͠ͱߋʹผͷ৘ใͰ෼ذ͕ඞཁ • ϦΫΤετͷඞਢύϥϝʔλͷෆ଍͸400? 404? 422? • ಉҰαʔϏε಺Ͱ͢Β౷Ұ͞Εͯͳ͍͜ͱ΋ • ϦόʔεϓϩΩγ͕502ͱ͔503Λฦ͢ • εςʔλείʔυʹAPIͷ࢓༷ͱͦΕҎ֎ͷ࢓༷͕ࠞࡏ͍ͯ͠Δ…

Slide 57

Slide 57 text

vs RESTful API / Swagger • GraphQL͸ʮGraphQLϨϕϧͰॲཧ͕੒ޭ͠ ͨΒ200ʯͰݻఆ͢Δ • Τϥʔίʔυ͸ϨεϙϯεͷerrorsϑΟʔϧυ Ͱදݱ͢Δ

Slide 58

Slide 58 text

vs RESTful API / Swagger OPUGPVOEͱͷ͜ͱ

Slide 59

Slide 59 text

vs RESTful API / Swagger • RESTͩͱ GET / POST / PUT / PATCH / DELETE ͚ͩͰશͯͷߋ৽ܥͷৼΔ෣͍Λද ݱ͠ͳ͍ͱ͍͚ͳ͍ • ʮϑΟʔϧυͷ࡟আʯ͸DELETE? PATCH? • GraphQLͷߋ৽ܥʢmutationʣ͸೚ҙͷ໊લ Λ͚ͭΒΕΔͷͰద੾ͳ໊લΛ͚ͭΕ͹Α͍

Slide 60

Slide 60 text

vs gRPC • ͜ͷ෦԰ͷ࣍ͷ࣌ؒͷςʔϚ͕gRPCͳͷͰৄ ͘͠͸ͦͪΒ΁ʂ • ൚༻ੑͷߴ͍RPCϥΠϒϥϦͰ࣮੷΋͋Δ • GraphQLͷΑ͏ͳʮ࠷খݶͷϦιʔεΛऔ ಘʯ͢Δͷ͕ऑ͍ҹ৅

Slide 61

Slide 61 text

·ͱΊ • ಡΈ΍͍͢ΫΤϦ • ΫΤϦΛಡΊ͹Ϩεϙϯε͕͍͍ͩͨ෼͔Δ • ܕ҆શͳεΩʔϚ • nullable / non-null ΋όονϦ૊ΈࠐΈ

Slide 62

Slide 62 text

GraphQL͸͍͍ͧ