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

Transcript

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

   Journey, Inc.

2. ࣗݾ঺հ • ໊લ: gfx (FUJI Goro) • ॴଐ: Bit Journey,

   Inc. • ؔΘ͍ͬͯΔϓϩμΫτ: Kibela • ৘ใڞ༗πʔϧ / Wiki • લճͷDroidKaigiͰ͸ʮORMͷબͼํʯͰͨ͠

3. ࣗݾ঺հ

4. Kibela

5. Kibela Web API • GraphQLΛ࠾༻ • ಺෦APIͱͯ͠͸Ұ෦ಋೖࡁΈ • ެ։༻APIͱͯ͠΋࠾༻༧ఆ •

   2018೥தʹ͸ެ։͍ͨ͠ • ϞόΠϧ༻API΋౰વGraphQL • ΞϓϦ͸React NativeͰ࣮૷༧ఆʢ༧ఆ͕஗Ε͓ͯΓະணखʣ

6. Agenda • SDD: Schema-Driven Developmentʹ͍ͭͯ • GraphQLͱ͸Կ͔ • GraphQL in

   Android • With Java / Kotlin • With React Native

7. SDD: Schema-Driven Development • SchemaʢʹAPIͱσʔλߏ଄ͷఆٛʣͱϩδοΫͷ։ ൃΛಉ࣌ʹਐΊΔ͜ͱ • αʔόʔαΠυͱΫϥΠΞϯταΠυͰschemaΛϕʔε ʹίϛϡχέʔγϣϯ͠΍͍͢ •

   ΫϥΠΞϯταΠυ͸schemaͷมߋΛ௥͏͜ͱͰαʔ όʔαΠυͷ࢓༷มߋʹ௥ै͠΍͍͢ • Schema͔Βͷίʔυੜ੒Ͱܕ҆શͳίʔυΛॻ͚Δ

8. DroidKaigi 2018ͱSDD • Web APIͷSDDޚࡾՈ͕੎ἧ͍ʂʂ • ·ͩAPIఆٛ؅ཧͰফ໣ͯ͠ΔͷʁʙSwaggerΛ༻ ͍ͨେن໛ΞϓϦ࣌୅ͷAPIఆٛ؅ཧͱίʔυδΣ ωϨʔτʙ •

   gRPCͱProtocol BuffersͰ࡞ΔɺҰຯҧ͏௨৴पΓ • ͢͹Β͖͠GraphQLͷSEKAI΁Α͏ͦ͜

9. yugui, 2018 ࠓ͞ΒProtocol BufferͱɺखʹೃછΉಓ۩ͷ࿩ https://qiita.com/yugui/items/160737021d25d761b353 “ࣗ෼ͷ؅׋ྖҬ಺ʹดͨ͡σʔλߏ଄Ͱ͋Ε͹ɺ εΩʔϚͱ͔ܕએݴͱ͔ࡉ͔͍റΓͳ͠Ͱܰྔʹ ਐΊΔͷ΋͋Γͩɻ͔͠͠ɺଞਓͷྖҬͱͷք໘ ͸͔ͬ͠Γఆ͓͍ٛͯͨ͠ํ͕ྑ͍ɻεΩʔϚఆ ٛͱ͍͏੫ۚΛࢧ෷Θͳ͍ͱͦͷ෼ͷπέ͸Ͳ͜

   ͔Ͱճ͖ͬͯͯɺ1ֻ͔࣌ؒΔE2Eςετ͕͚͜Δ ͱ͔ɺि࣍มߋϨϏϡʔ߹ಉձٞͷൃ଍ͱ͔ɺͦ ͏͍͏΍ͭͰࢧ෷͏͜ͱʹͳΔɻ”

10. GraphQLͱ͸Կ͔

11. GraphQLʹ͍ͭͯ • Facebook͕։ൃ͍ͯ͠ΔΫΤϦݴޠ • ϦιʔεऔಘʹಛԽͨ͠Web API࢓༷ͱ͍͑Δ • Web API ͳͷͰ௨৴ϓϩτίϧ͸HTTP

    • ೝূ΍response bodyͷѹॖͳͲ͸HTTPʹ४ͣΔ • ಺෦APIͱͯ͠΋֎෦APIͱͯ͠΋༗ޮ

12. “ϦιʔεऔಘʹಛԽͨ͠Web API” • Ϧιʔεऔಘܥ͕ඇৗʹॊೈ͔ͭڧྗ • Ϧιʔεߋ৽ܥ͸ϝιουΛఆٛͯ͠ݺͿײ ͡ʹͳΔͷͰGraphQLͰ͋ΔϝϦοτ͸গͳ ͍ • “ϦιʔεͷऔಘʹGraphQLΛ࢖ͬͯߋ৽͸

    RESTͰ”ͱ͍͏ͷΛఏএ͢Δਓ΋͍ΔϨϕϧ

13. GitHubͷGraphQL APIΛ GaphiQLͰோΊΔ

14. GraphiQLʢάϥϑΟΫϧʣ • The GraphQL IDE • ཁ͢ΔʹAPI console / API

    explorer • ิ׬͕ޮ͘͏͑ʹυΩϡϝϯτϏϡʔΞ಺ଂ • GraphiQL͕͋Δ͔ΒGraphQLΛ࢖͏ͱ͍͏Ϩ ϕϧͷڧྗͳπʔϧ

15. σϞ / movie

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

17. GraphQLͷ༷ࢠ with GitHub

18. GraphQLͷ༷ࢠ with GitHub

19. GraphQLͷ༷ࢠ with GitHub

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

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

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

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

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

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

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

    ෆཁͳͱ͖͸ϦΫΤετ͠ͳ͍͜ͱͰαʔόʔ αΠυͰͷܭࢉΛ࡟ݮͰ͖Δ

27. ܕγεςϜ • جຊܕ + ഑ྻ + Ϋϥε + ΠϯλʔϑΣΠε •

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

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

29. Relay 1. Facebook͕։ൃ͍ͯ͠ΔGraphQLΛલఏͱ͠ ͨView Frameworkͷ͜ͱ 2. Relay (1) ͕αʔόʔʹରͯ͠ٻΊΔ࢓༷Ͱ͋ ΔRelay

    Server Specificationͷ͜ͱ • GraphQLίΞʹෆ଍͢Δ෦෼Λิ׬͢Δ࢓ ༷ͳͷͰशಘඞਢ

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

31. ͳͥRelay Connection͕ඞཁ͔ • ϦετͷεϥΠεͰ͋Δ഑ྻΛฦ͍ͨ͠ • ೚ҙͷϝλσʔλΛฦ͍ͨ͠ • ͭ·Γੜͷ഑ྻΛฦ͢Θ͚ʹ͸͍͔ͳ͍ • ͦ͜Ͱ

    edges / node ͱ͍͏૚Λઃ͚ͨ

32. Relay Connection in GitHub WJFXFS
    
    DVSSFOU
    VTFS
    ͷ
    lQVCMJD
    SFQPTJUPSJFT͔Β࠷৽ͭ
    ͨͩ͠GPSLΛআ͘z

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

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

35. Relay Connection in GitHub

36. Relay Connection in GitHub

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

    ࢖͍׳ΕͨΤσΟλͰॻ͖͍͕ͨ…

38. ͜͜·Ͱͷ·ͱΊ • GraphQL: Web API༻ͷΫΤϦݴޠ • GraphiQL: GraphQL༻ͷAPI console •

    Relay: View FrameworkͱͦΕ͕ཁٻ͢Δαʔόʔ ͷ࢓༷ • Relay Connection: ϖʔδϯάՄೳͳϦετͷ࢓༷

39. GraphQL in Android

40. Apollo - GraphQL client • JS / Android / iOS

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

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

42. Apollo for Android ˣίʔυੜ੒

43. Apollo for Android • ΫΤϦ͝ͱʹΫϥε܈Λੜ੒͢Δ • ϦΫΤετΫϥε • ϨεϙϯεΫϥε •

    HTTP௨৴෦෼͸OkHttpʹґଘ

44. Apollo for Android • ͋·Γ࢖ͬͯͳ͍ͷͰͬ͘͟Γॴײ • GraphQL query͸ରԠ͢Δviewͱಉ͡ϑΝΠϧʹஔ ͖͍͕ͨɺApolloͷ৔߹ *.graphql

    ʹॻ͘ͷ͕ෆศ • KotlinͩͬͨΒ෮਺จࣈྻϦςϥϧ͕͋ΔͷͰ view componentʹqueryΛॻ͘ͷ͸ϫϯνϟϯ ͋Γͦ͏

45. JavaScript / TypeScript • Relay • Apollo • ੜGraphQLͰ΋ී௨ʹ࢖͑Δ •

    Kibela (web) ͸ੜGraphQLͰ΍͍ͬͯΔ

46. Relay • “A JavaScript framework for building data- driven React

    applications” • σʔλͷྲྀΕ͸Fluxͱಉ͡ • View componentͱqueryΛಉ͡ϑΝΠϧʹॻ͘ • ͳͥͳΒʮͦͷviewʹͱͬͯඞཁͳσʔλʯΛ աෆ଍ͳ͘஌͍ͬͯΔͷ͸ͦͷview͚͔ͩͩΒ

47. Relayͷงғؾ

48. Relayͷงғؾ 3FBDU
    $PNQPOFOU

49. Relayͷงғؾ (SBQI2-ΫΤϦ

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

51. Relay does not meet TypeScript • KibelaͰ͸͓ͦΒ͘Relay͸࢖Θͳ͍ • ͳͥͳΒTypeScriptͱͷ૬ੑ͕ѱ͍͔Β •

    ύονΛ౰ͯͳ͍ͱϏϧυͰ͖ͳ͍Ϩϕϧ • queryͱviewΛରԠͤ͞Δͱ͍͏ൃ૝͸Α͍ͷ Ͱͦͷൃ૝͚ͩࢀߟʹ͢Δ

52. Ϟσϧ͸ʁ෗ഊ๷ࢭ૚͸ʁ • GraphQLΛ࢖͏ͱ͖͸ʮview component͕ඞཁͳ ϑΟʔϧυ͚ͩΛϦΫΤετͯͦ͠ͷσʔλΛview ʹຒΊΔʯΈ͍ͨͳΞʔΩςΫνϟ͕Αͦ͞͏ • Ϟσϧ΍෗ഊ๷ࢭ૚ͱ͍͏֓೦͸ෆཁͳͷͰ͸…ͱ ࢥ͍ͬͯΔ •

    ·ͩʮࣗ෼ͰAPIΛ։ൃ͠ͳ͕ΒviewΛ૊Ήʯ͜ ͱ͔ͯ͠͠ͳ͍ͷͰ͜ͷล͸ະ஌਺Ͱ͸͋Δ

53. εΩʔϚΛαόΫϥͰڞ༗ʁ • GraphQL API͸εΩʔϚΛΤϯυϙΠϯτͰε ΩʔϚΛฦ͢ • ίʔυੜ੒ʹ͸εΩʔϚ͕ඞཁͳͷͰɺϏϧυ ࣌ʹΤϯυϙΠϯτΛୟ͍ͯεΩʔϚΛऔͬͯ ͘Δ •

    ͜ͷͱ͖ΤϯυϙΠϯτΛϩʔΧϧʹ͢Ε͹ ։ൃ൛ͷར༻΋Մೳ

54. ଞͷWeb APIख๏΁ͷॴײ

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

56. vs RESTful API / Swagger • ಉ͡HTTPεςʔλείʔυʹ෮਺ͷҙຯΛ࣋ͨͤͨ݁Ռ࢖͍෺ʹͳΒͳ ͍͜ͱ͕͠͹͠͹ • OAuth

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

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

    Ͱදݱ͢Δ

58. vs RESTful API / Swagger OPU
    GPVOEͱͷ͜ͱ

59. vs RESTful API / Swagger • RESTͩͱ GET / POST

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

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

61. ·ͱΊ • ಡΈ΍͍͢ΫΤϦ • ΫΤϦΛಡΊ͹Ϩεϙϯε͕͍͍ͩͨ෼͔Δ • ܕ҆શͳεΩʔϚ • nullable /

    non-null ΋όονϦ૊ΈࠐΈ

62. GraphQL͸͍͍ͧ