GraphQLとの向き合い方2022年版

Transcript

1. GraphQLͱͷ޲͖߹͍ํ
   2022 ೥൛
   @Quramy 2022.02.22
   #fec_fukuoka
   

   View Slide

2. ๻ͱ#fec_fukuoka
   - 2019೥ʹ։࠵͞Εͨࡍʹొஃͤͯ͞΋Β͍·ͨ͠
   - https://speakerdeck.com/quramy/vrt-in-action
   

   View Slide

3. About me
   - Twitter / GitHub: @Quramy
   - ϦΫϧʔτͰWebϑϩϯτΤϯδχΞ΍ͬͯ·͢
   (ࠓ͸ແ৬͡Όͳ͍Αʂ)
   - 2021೥7݄ࠒ͔ΒελσΟαϓϦͷ࢓ࣄΛ͢ΔΑ
   ͏ʹͳΓ·ͨ͠
   

   View Slide

4. ࠓ೔࿩͢͜ͱ
   - 2021೥7݄ࠒΑΓ
   ʰελσΟαϓϦ தֶߨ࠲ʱϕʔγοΫίʔε ϦχϡΞʔϧ Prj
   ͱ͍͏ GraphQLΛ࠾༻ͨ͠PrjʹδϣΠϯ
   - ઌ೔ʢͱ͍͏͔ࡢ೔ʣແࣄϦϦʔε͞Ε·ͨ͠ɻ΍ͬͨͶʂ
   - ͜ͷ Prj ʹͯ GraphQLΛ࢖͏্ͰɺͲͷΑ͏ͳ͜ͱΛߟ͑ͨͷ͔ɾͲΜ
   ͳؾ͖͕͔ͮ͋ͬͨɺΛத৺ʹ࿩͍͖ͯ͠·͢
   

   View Slide

5. Agenda
   1. Why GraphQL
   2. How GraphQL
   3. Future of GraphQL
   

   View Slide

6. 1. Why GraphQL
   

   View Slide

7. Why GraphQL
   - GraphQLͷಛ௃:
   - Schemaఆ͕ٛඞਢͰ͋Δ͜ͱ
   - Client͕ΫΤϦͷܾఆݖΛѲ͍ͬͯΔ͜ͱ
   

   View Slide

8. Why GraphQL
   - GraphQLͷಛ௃:
   - Schemaఆ͕ٛඞਢͰ͋Δ͜ͱ
   - Client͕ΫΤϦͷܾఆݖΛѲ͍ͬͯΔ͜ͱ
   

   View Slide

9. Schemaఆ͕ٛඞਢͰ͋Δ͜ͱ
   - աڈʹผPrjͰൃੜ͍ͯͨ͠՝୊:
   - RESTish API / FrontendΛ୯ಠͷ։ൃऀͰ։ൃͰ͖ͯ͠·͏৔߹ɺ
   UndocumentedͳAPI͕ੜ·Εͯ͠·͍͕ͪ
   - e.g. Responseͷxxxͱ͍͏ΦϒδΣΫτ͸nullableͳͷ͔ෆ໌
   - ͜ͷAPIΛར༻͢ΔFrontend։ൃऀͷෛ୲ʹ…
   (Web Frontend༻ʹ࡞ΒΕͨAPIΛNative App͔Β࠶ར༻͢Δࡍʹݦࡏ
   Խ)
   

   View Slide

10. Schemaఆ͕ٛඞਢͰ͋Δ͜ͱ
    - GraphQLͷ৔߹ʮSchemaΛఆٛ͠ͳ͍ͱFrontend͸։ൃͰ͖ͳ͍ʯͱ
    ͍͏੍໿͕͋Δ
    - ※ RESTish APIͰ΋ɺOpen APIͳͲͷπʔϧνΣΠϯΛ͔ͬ͠Γར༻͢
    Ε͹Documentation ͢Δ͜ͱ͸ՄೳͰ͋Δ͕ɺ๞͘·Ͱ opt-in
    

    View Slide

11. Why GraphQL
    - GraphQLͷಛ௃:
    - Schemaఆ͕ٛඞਢͰ͋Δ͜ͱ
    - Client͕ΫΤϦͷܾఆݖΛѲ͍ͬͯΔ͜ͱ
    

    View Slide

12. ClientʹΫΤϦͷܾఆݖ͕͋Δ
    - GraphQL v.s. RESTish API ͷ࠷େͷҧ͍
    https://qconnewyork.com/ny2015/system/files/presentation-slides/
    qcon_dda_2015_iwork09_boguta_nolen.pdf
    - GraphQL: Demand Driven Architecture
    - RESTish API: Supply Driven Architecture
    - ʮGraphQLΛ࠾༻͢Δʯʹ͸ɺ͜ͷੑ࣭ͷҧ͍Λࠎͷ਷·Ͱୟ͖ࠐΜͰ
    ͓͘΂͖
    

    View Slide

13. ClientʹΫΤϦͷܾఆݖ͕͋Δ
    - Demand Driven Architectureͱ͸
    - ʮϨεϙϯεͷܗΛClient͕ܾఆͰ͖ΔʯλΠϓͷ௨৴ํ๏
    - e.g. GraphQL, SQL, SPARQL, etc…
    - Supply Driven Architectureͱ͸
    - ʮϨεϙϯεͷܗ͕ࣜServerͰܾఆ͞ΕΔʯλΠϓ
    - e.g. REST, SOAP, etc…
    

    View Slide

14. ClientʹΫΤϦͷܾఆݖ͕͋Δ
    - ʮClientʹΫΤϦͷܾఆݖ͕͋Δʯ͕ޮ͍ͯ͘Δྫͱͯ͠ɺෳ਺ͷ
    Frontend ͕ڍ͛ΒΕΔ
    - աڈͷผPrjͰ͸ɺWeb Frontend ޲͚ʹ࣮૷ɾެ։ͨ͠ RESTish API
    ΛNative App͔Β࠶ར༻͢ΔΞϓϩʔνΛ࠾͍ͬͯͨ
    - ͜ͷPrjͰͷAPI͸Web FrontendʹಛԽ࣮ͨ͠૷͕ͳ͞Ε͍ͯͨͨΊɺ
    ඞͣ͠΋Native App͔Β࢖͍΍͍͢Θ͚Ͱ͸ͳ͔ͬͨ
    (Smart UI patternͷฐ֐)
    

    View Slide

15. ClientʹΫΤϦͷܾఆݖ͕͋Δ
    - GraphQLͷ৔߹ɺ(SchemaʹఆΊΒΕ͍ͯΔൣғʹ͓͍ͯ͸) Ϩεϙ
    ϯεͷܗࣜ͸Frontendଆ͕ࣗ༝ʹܾΊΔ͜ͱ͕Ͱ͖Δ
    - ࣮ࡍɺݱPrjͰ͸Web Frontend ͕Native AppΑΓ΋ޙ͔ΒࢀՃ͕ͨ͠
    ʮWeb Frontend ʹͱͬͯඞཁे෼ͳΫΤϦʯΛطଘͷSchema͔Βى͜
    ͚ͩ͢ͰࡁΜͩ
    

    View Slide

16. (ࢀߟ) Backend For Frontend
    - ෳ਺छྨ Frontend ͕ଘࡏ͢Δ৔߹ɺͦΕͧΕͷ Client छผʹରͯ͠
    BFF Λ࣮૷͢Ε͹ɺݸʑͷBFF͕Smart UIʹͳͬͨͱ͜ΖͰ໰୊ͳ͍
    - ͨͩ͠ Backend ͱ͸ผʹ͞Βʹதؒ૚ͷ Server Λ༻ҙ͢Δ͜ͱʹͳΔ
    ͨΊɺ։ൃ޻਺্ͷτϨʔυΦϑ͕ൃੜ͢Δ
    ·ͨɺNative App޲͚ͷBFFΛʮ୭͕ʯʮͲͷΑ͏ʹʯ։ൃ͢Δͷ͔ɺ͕໰୊ʹͳΓ΍͍͢
    ҹ৅
    

    View Slide

17. Why GraphQL
    - ͜͜·Ͱͷ·ͱΊ
    - աڈ Prj ʹ͓͍ͯɺWeb / Native Frontend Λ RESTish API Ͱ։ൃͯ͠
    ্͍͘Ͱͷ՝୊͕͋ͬͨ
    - Undocumented, (Supply Driven͕Ώ͑ͷ) Smart UI
    - GraphQL ͷ Schema / Demand Driven ͕͜ΕΒͷղফʹ໾ཱͭΛ͜
    ͱظ଴ͯ͠࠾༻
    

    View Slide

18. 2. How GraphQL
    

    View Slide

19. How GraphQL
    - Schema Driven Development
    - Paradigm Shift
    - Tools / Developer Experience
    

    View Slide

20. How GraphQL
    - Schema Driven Development
    - Paradigm Shift
    - Tools / Developer Experience
    

    View Slide

21. Schema Driven Development
    - GraphQL Schema ͸ IDL(Interface Definition Language) ʹ૬౰
    - Schema Λ࣮૷͢Δଆ (Backend Devs) / ར༻ଆ (Frontend Devs) Ͱٞ࿦
    ܾͯ͠ఆ͢Δ
    4DIFNB
    J04
    EFWT
    "OESPJE
    EFWT
    8FC'&
    EFWT
    #BDLFOE
    EFWT
    Implement resolvers
    Query / Mutation
    

    View Slide

22. J04EFWT
    #BDLFOEEFWT
    8FC'&EFWT
    

    View Slide

23. J04EFWT
    #BDLFOEEFWT
    8FC'&EFWT
    4DIFNB͸։ൃऀશһͰҭͯΔ΋ͷʂ
    

    View Slide

24. Schema Driven Development
    ࣮૷ʹ͕͔͔࣌ؒΓͦ͏ͳ Schema มߋͷ৔߹ɺ࣍ͷϑϩʔͰ։ൃΛ͢͢
    ΊΔ͜ͱ΋
    1. SDL ΛօͰٞ࿦ͯ͠ఆΊΔ
    2. ઌʹ Mock Λॻ͘ (apollo-server ͷ Mock Resolver Λར༻)
    3. Frontend: Mock Λར༻͠ͳ͕Β UI Λ࣮૷
    4. Backend: SDL / MockΛோΊͳ͕Β࣮ Resolver Λ࣮૷
    

    View Slide

25. How GraphQL
    - Schema Driven Development
    - Paradigm Shift
    - Tools / Developer Experience
    

    View Slide

26. Paradigm Shift
    - GraphQL ͷʮClient ʹΫΤϦͷܾఆݖ͕͋Δʯͷಛੑ্ɺRESTish API
    Λར༻ͨ͠։ൃͱ͸ߟ͑ํΛม͑Δඞཁ͕͋ΔՕॴ͕͋Δ
    - Ұํ Prj ࢀըऀશһ͕࠷ॳ͔Β GraphQL ʹ໌Δ͍ͱ͸ݶΒͳ͍
    - Prj ൃ଍࣌ʹ PoC Sprint Λ࣮ࢪ (Backend / Native devs)
    Web Frontend νʔϜ͸ൃ଍λΠϛϯά͕ҟͳ͍ͬͯͨͨΊɺผ్ษ
    ڧձͰΧόʔ
    

    View Slide

27. GraphQL Workshop
    - Web Frontend devs ޲͚ͷ GraphQL Workshop ࢿྉ͸ҎԼͷURLͰެ
    ։ͯ͠·͢
    - https://github.com/Quramy/gql-study-workshop
    - React.js / Apollo Client Λ࢖͍ɺͪΐͬͱͨ͠ΞϓϦέʔγϣϯΛ։
    ൃ͢ΔྲྀΕΛ1͔Βֶ΂ΔΑ͏ʹઃܭ
    - Normalized Cache΍Fragment Colocation ͳͲͷ֓೦΋Χόʔ
    

    View Slide

28. View Slide

29. Fragment ͱ Query Composition
    - ։ൃνʔϜશମͰ GraphQL ʹ޲͖߹͏ࡍʹ Fragment Colocation ͷߟ
    ͑ํʹࢍಉͯ͠΋Β͏Α͏ʹ஫ྗ.
    - ʮUI ࣮૷ͱ API ௨৴ΛͲ͏౷߹͢Δ͔ʯΛݕ౼͢Δ্ͰॏཁͱͳΔͨΊ
    - Component Oriented Design (e.g. Atomic Design)
    - Demand Driven Architecture ʮClient ʹΫΤϦͷܾఆݖ͕͋Δʯ
    

    View Slide

30. Fragment ͱ Query Composition
    - ։ൃνʔϜશମͰ GraphQL ʹ޲͖߹͏ࡍʹ Fragment Colocation ͷߟ
    ͑ํʹࢍಉͯ͠΋Β͏Α͏ʹ஫ྗ.
    - ʮUI ࣮૷ͱ API ௨৴ΛͲ͏౷߹͢Δ͔ʯΛݕ౼͢Δ্ͰॏཁͱͳΔͨΊ
    - Component Oriented Design (e.g. Atomic Design)
    - Demand Driven Architecture ʮClient ʹΫΤϦͷܾఆݖ͕͋Δʯ
    'SBHNFOU$PMPDBUJPOͰ͜ΕΒ͕਌࿨͢Δ
    

    View Slide

31. https://quramy.medium.com/render-as-you-fetch-incremental-graphql-fragments-70e643edd61e
    

    View Slide

32. How GraphQL
    - Schema Driven Development
    - Paradigm Shift
    - Tools / Developer Experience
    

    View Slide

33. GraphQL ͱ Toolୡ
    - graphql-code-generator
    - GraphQL ΫΤϦ͔Β apollo-clientͷhookΛੜ੒
    - SDL͔Β resolverͷܕΛੜ੒
    - ts-graphql-plugin (ࣗ࡞)
    - tsxϑΝΠϧ಺ͰͷGraphQL ΫΤϦͷิ׬ʹར༻
    - Apollo CLI
    - GraphQL ΫΤϦ͔Β persisted queryͷநग़
    

    View Slide

34. GraphQL ͱ Toolୡ
    - graphql-code-generator
    - GraphQL ΫΤϦ͔Β apollo-clientͷhookΛੜ੒
    - SDL͔Β resolverͷܕΛੜ੒
    - ts-graphql-plugin (ࣗ࡞)
    - tsxϑΝΠϧ಺ͰͷGraphQL ΫΤϦͷิ׬ʹར༻
    - Apollo CLI
    - GraphQL ΫΤϦ͔Β persisted queryͷநग़
    ׂͱఆ൪ײ͋ΔͷͰࠓ೔͸ׂѪ
    

    View Slide

35. Persisted Query
    - Persisted Query is Կ:
    - GraphQLΫΤϦͷຊจͱରͱͳΔϋογϡΛServerʹڭ͑ࠐΜͰ͓͖ɺ ΫΤϦຊจΛPOST͢Δ୅ΘΓ
    ʹ ֘౰ͷϋογϡΛURLʹ෇༩ͯ͠ GET ͢Δٕज़
    https://qiita.com/Quramy/items/b3943a0c27f3ade2c57d
    - Persisted Query Λಋೖ͢Δ͜ͱͰ
    - ServerଆͰͷQuery parsingͷίετ࡟ݮ
    - ະొ࿥ͷQueryΛ஄͘Α͏ʹ͢Ε͹ɺServerΛѱҙͷ͋ΔΫΤϦ͔Β๷ޚͰ͖Δ
    

    View Slide

36. Persisted Query
    - ServerΛѱҙ͋ΔΫΤϦ͔Β๷ޚ͢ΔͨΊɺొ࿥ࡁΈͷΫΤϦͷΈڐՄ
    - ͜ΕΛ࣮ݱ͢ΔͨΊɺݱPrjͰ͸ Apollo CLIͷ extract ίϚϯυΛ࣮ߦ
    ͯ͠ʮFrontend͔Βൃߦ͞Ε͍ͯΔΫΤϦͷશͯʯΛ؅ཧ͍ͯ͠Δ
    (ݱঢ়Ͱ͸GitHub্ͷιʔείʔυѻ͍. Ώ͘Ώ͘͸ม͑Δ͔΋)
    - ΫΤϦΛServerʹొ࿥ͤͣʹdeployͰ͖ͳ͍࢓૊Έ΋੔උத
    

    View Slide

37. Persisted Query
    - ୨΅ͨతͳԸܙ΋
    - ʮFragment ͕౷߹͞ΕͨΫΤϦʯ͕Ұׅ؅ཧ͞Ε͍ͯΔ
    - ts ΍ swiftͷίʔυ্ɺΫΤϦ͸ Fragment ͕෼ࢄ؅ཧ͞Ε͍ͯΔ͕ɺ
    Persisted Query ͷͨΊͷʮநग़͞ΕͨΫΤϦʯΛඥղ͚͹ɺ࣮ࡍʹͲ
    ͷΑ͏ͳΫΤϦ͕ඈͿͷ͔͙͢ʹ೺ѲͰ͖Δ
    - Persisted Query Λ૊ΈࠐΉ͔൱͔ͱؔ܎ͳ͘ɺApollo CLI Ͱextract ͠
    ͨΫΤϦΛօ͕ݟ͑Δͱ͜ΖͰڞ༗͓ͯ͘͠ͱΑ͍
    

    View Slide

38. How GraphQL
    - ͜͜·Ͱͷ·ͱΊ
    - Schema: Backend / Frontend ؔ܎ͳ͘ Devs օͰٞ࿦ͯ͠ҭͯΔ
    - Query: UI ຤୺͔Β૊Έ্͍͛ͯ͘ͱ͍͏ҙຯͰ Frontend ͷ΋ͷ
    ҰํͰ ʮPrj ʹͲͷΑ͏ͳQuery͕ଘࡏ͍ͯ͠Δͷ͔ʯΛՄࢹԽ͓ͯ͠
    ͘ͱ৭ʑศར
    - REST API ʹ͸ଘࡏ͠ͳ͍֓೦΋ग़ͯ͘Δ͚ͲɺօͰ΍Ε͹ා͘ͳ͍
    

    View Slide

39. 3. Future of GraphQL
    

    View Slide

40. Future of GraphQL
    - ࠷ۙؾʹͳ͍ͬͯΔ͜ͱ
    - defer / stream directive
    - Apollo Client v4
    - etc ,,, (Federation ͳͲ)
    

    View Slide

41. Future of GraphQL
    - ࠷ۙؾʹͳ͍ͬͯΔ͜ͱ
    - defer / stream directive
    - Apollo Client v4
    - etc ,,, (Federation ͳͲ)
    

    View Slide

42. @defer / @stream
    - GraphQL Working Group Ͱݕ౼தͷ৽͍͠σΟϨΫςΟϒ
    - https://github.com/graphql/graphql-wg/blob/main/rfcs/DeferStream.md
    - https://graphql.org/blog/2020-12-08-improving-latency-with-defer-and-stream-
    directives/
    - https://medium.com/@quramy/incremental-data-delivery-with-graphql-defer-and-
    stream-d779b5e38833
    

    View Slide

43. @defer / @stream
    - ྫ: ҎԼͷΑ͏ͳΫΤϦ͕͋ͬͨͱͯ͠ɺ
    specialPrice field ͷܭࢉίετ͕େ͖͔ͬͨͱ͢Δ
    

    View Slide

44. @defer / @stream
    - Query͕શͯղܾ͞ΕΔ·ͰClient͸ඳըΛ։࢝Ͱ͖ͳ͍
    

    View Slide

45. @defer / @stream
    - ΋ͬͱࡉ͔͘ඳըΛίϯτϩʔϧ͍ͨ͠
    -> ͜ΕΛ࣮ݱ͢ΔͨΊͷσΟϨΫςΟϒ
    

    View Slide

46. @defer / @stream
    - 1 Operation : ෳ਺ ResponseͱͳΔ
    - Fragment ʹ෇༩
    - React.js ͷ Suspense for data fetch ͱ
    ਌࿨ੑߴ͍(͸ͣ)
    - ݱPrjͰ΋ར༻Ͱ͖Δͱ͜Ζ͕͋Γͦ͏
    (ϗʔϜը໘ͳͲɺෳ਺fieldΛ·ͱΊͯऔಘ͍ͯ͠ΔՕॴ)
    query ProductDetailQuery {
    product(id: 100) {
    id
    name
    imageURL
    ...DeferredPrice @defer
    }
    }
    fragment DeferredPrice on Product {
    specialPrice
    }
    

    View Slide

47. Future of GraphQL
    - ࠷ۙؾʹͳ͍ͬͯΔ͜ͱ
    - defer / stream directive
    - Apollo Client v4
    - etc ,,, (Federation ͳͲ)
    

    View Slide

48. Apollo Client v4
    - https://github.com/apollographql/apollo-client/issues/8245
    -
    

    View Slide

49. Apollo Client v4
    - લड़ͷ @defer / @stream ʹ͍ͭͯ΋ಉ͜͡ͱ͕ݴ͑Δ͸͕ͣͩɺ
    fragmentΛҰڃࢢຽʹ͍͔ͯ͠ͳ͍ͱɺGraphQL Spec΍React ଆͷਐ
    Խ(ಛʹSuspense for Data fetching)ʹ଱͑ΒΕͳ͘ͳͬͯ͘Δ͸ͣ
    - ݱঢ়ͷApollo Clientʹ͸ useFragment ͷΑ͏ͳhook͕ଘࡏ͍ͯ͠ͳ͍
    ͕ɺv4Ͱ͸͜Ε͕ੜ·Εͦ͏
    - Fragmentͷѻ͍ͱ͍͏ҙຯͰ͸Facebook Relay ͷํ͕खް͘޲͖߹ͬ
    ͯΔ
    

    View Slide

50. Apollo Client v4
    - Apollo Client v3.6 Ͱ͸ Breaking Change͸ߦΘΕͳ͍͕ɺv4Ͱ
    useLazyQuery΍ partial fetching ͳͲͷҰ෦͕࡟আ͞ΕΔՄೳੑ͕͋Δ
    - ͜ΕΒͷػೳʹ͋·Γґଘ͠ͳ͍ํ͕Α͍
    - (ͱ͸ݴ͑ useLazyQuery ͷ୅ସखஈ͸Ṗʣ
    

    View Slide

51. ͓ΘΓʹ
    

    View Slide

52. ͓ΘΓʹ
    - GraphQL Tokyo ͱ͍͏meetup Λఆظతʹ։࠵͍ͯ͠·͢
    - https://www.meetup.com/ja-JP/GraphQL-Tokyo/
    - ࣍ճ͸ 2022.02.24. ྑ͚Ε͹དྷ͍ͯͩ͘͞!
    

    View Slide

53. Thank you!
    

    View Slide