apollo client / react / esm

Transcript

1. Apollo Client ͱ React
   ͱ ESM
   @Quramy
   2022.9.27 iCare Dev Meetup#35
   

   View Slide

2. About me
   - Twitter / GitHub: @Quramy
   - ๭ࣾͰ Web ϑϩϯτΤϯδχΞ΍ͬͯ·͢
   - iCare Ͱ΋ GraphQL पΓͷ͓ख఻͍Λ͍ͯ͠·͢
   - TypeScript ΍ GraphQL ͸ׂͱੲ͔Β΍͍ͬͯ·͢
   

   View Slide

3. ͍͖ͳΓࠓ೔ͷ݁࿦
   @apollo/client Λ Node.js Ͱ࢖͏ͷ͖ͼ͍͠
   

   View Slide

4. @apollo/client ͱ͸
   - ݴΘͣͱ஌Εͨ JavaScript ʹ͓͚Δ GraphQL ΫϥΠΞϯτϥΠϒϥϦ
   - ϑϩϯτΤϯυ޲͚ GraphQL ϥΠϒϥϦͱͯ͠͸࿝ฮ.
   v1.0.0 ͕ϦϦʔε͞Εͨͷ͕ 2017೥ࠒ
   - ※ Meta(چ Facebook) ͕ GraphQL ͷ࢓༷Λެ։ͨ͠ͷ͸2015೥
   - ݱߦͷ҆ఆ൛͸ v3.6.x
   - ※ ͍ͭ5೔ఔલʹ v3.7 ͷ RC ͕ग़·ͨ͠Ͷ 🎉
   

   View Slide

5. @apollo/client ͷྺ࢙
   - v2.x
   - ࡉ͔͘ npm ύοέʔδ͕ผΕ͍ͯͨ
   ։ൃऀ͕ඞཁʹԠͯ͡ɺݸผͷύοέʔδΛΠϯετʔϧ͍ͯͨ͠
   - v3.x
   - all in one ͳ npm ύοέʔδʹੜ·ΕมΘͬͨ
   

   View Slide

6. @apollo/client ͷྺ࢙
   - v2.x
   - ࡉ͔͘ npm ύοέʔδ͕ผΕ͍ͯͨ
   ։ൃऀ͕ඞཁʹԠͯ͡ɺݸผͷύοέʔδΛΠϯετʔϧ͍ͯͨ͠
   - v3.x
   - all in one ͳ npm ύοέʔδʹੜ·ΕมΘͬͨ
   

   View Slide

7. apollo-client v2.x
   ͦΕͧΕʹOQNJ͢Δඞཁ͕͋Δ
   https://github.com/Quramy/apollo-link-fragment-argument/blob/master/src/link.test.ts
   

   View Slide

8. @apollo/client ͷྺ࢙
   - v2.x
   - ࡉ͔͘ npm ύοέʔδ͕ผΕ͍ͯͨ
   ։ൃऀ͕ඞཁʹԠͯ͡ɺݸผͷύοέʔδΛΠϯετʔϧ͍ͯͨ͠
   - v3.x
   - all in one ͳ npm ύοέʔδʹੜ·ΕมΘͬͨ
   

   View Slide

9. @apollo/client v3.x
   

   View Slide

10. @apollo/client ͕ఏڙ͢Δػೳ
    - React ʹಛԽͨ͠ػೳ
    - Provider / hooks / SSR ޲͚ػೳ / HoC (deprecated)
    - React ͱಠཱͨ͠ػೳ
    - GraphQL client
    - Cache
    - Links
    

    View Slide

11. React ͷ༗ແ
    - ʮ͍΍ɺ͏ͪ͸ React ͱ૊Έ߹Θ͍ͤͨΘ͚͡Όͳ͍Μ͚ͩͲʯͱ͍͏
    Ϣʔβʔ͸Ͳ͏ͨ͠Β͍͍ͷ͔ʁ
    - ϑϩϯτΤϯυ: Vue.js / Angular / Svelte / etc...
    - αʔόʔαΠυ: Node.js
    

    View Slide

12. @apollo/client v3 ͷ Entry points
    https://www.apollographql.com/blog/announcement/frontend/announcing-the-release-of-apollo-client-3-0/
    

    View Slide

13. @apollo/client v3 ͷ Entry points
    - React ͱҰॹʹ࢖͍͍ͨਓ:
    - import { ApolloClient, ApolloProvider } from "@apollo/client"
    - npm i @apollo/client ͢Δ͚ͩͰࡁΜͰخ͍͠
    - React ෆཁͳਓ:
    - import { ApolloClient } from "@apollo/client/core"
    - React ഉআ্ͨ͠Ͱ core ύοέʔδ͚ͩ࢖͑ͯخ͍͠
    

    View Slide

14. @apollo/client v3 ͷ Entry points
    - React ͱҰॹʹ࢖͍͍ͨਓ:
    - import { ApolloClient, ApolloProvider } from "@apollo/client"
    - npm i @apollo/client ͢Δ͚ͩͰࡁΜͰخ͍͠
    - React ෆཁͳਓ:
    - import { ApolloClient } from "@apollo/client/core"
    - React ഉআ্ͨ͠Ͱ core ύοέʔδ͚ͩ࢖͑ͯخ͍͠
    ฏ࿨͕๚Εͨ
    

    View Slide

15. @apollo/client v3 ͷ Entry points
    - React ͱҰॹʹ࢖͍͍ͨਓ:
    - import { ApolloClient, ApolloProvider } from "@apollo/client"
    - npm i @apollo/client ͢Δ͚ͩͰࡁΜͰخ͍͠
    - React ෆཁͳਓ:
    - import { ApolloClient } from "@apollo/client/core"
    - React ഉআ্ͨ͠Ͱ core ύοέʔδ͚ͩ࢖͑ͯخ͍͠
    ฏ࿨͕๚Εͨ
    ͦΜͳ͜ͱ͸ͳ͔ͬͨͷͰ͋Δ
    

    View Slide

16. - import { ApolloClient } from "@apollo/client/core"
    - ͜ͷ import จ͸ʮৗʹʯਖ਼͍͠ͷ͔ʁ
    

    View Slide

17. ͩΊ͡ΌΜ
    

    View Slide

18. ͜Ε΋ͩΊ
    

    View Slide

19. Default import ?
    

    View Slide

20. Ͳ͏ͯ͜͠͏ͳͬͪΌ͏ͷ
    - @apollo/client ͷαϒσΟϨΫτϦ (/coreͳͲ) ͸ Node.js Ͱར༻Մೳͳ
    ESM ͱͯ͠ Publish͞Ε͍ͯͳ͍
    - ผͷ Node.js ESM ͳ ύοέʔδ͔Βڐ͞ΕΔ import จ͸
    import AC from "@apollo/client"
    ͷܗࣜͷΈ
    - @apollo/client શମΛ load ͢Δ͜ͱʹͳΓɺreact ύοέʔδ͕ແ͍ͱ
    "Cannot find module" ͷΤϥʔͰམͪΔ
    - ݁ہʮ react ͕͍Βͳ͍ਓ޲͚ʯͷखஈ͕ఏڙ͞Ε͍ͯͳ͍͜ͱʹͳͬͯ͠
    ·͏
    

    View Slide

21. - import { ApolloClient } from "@apollo/client/core"
    - ͜ͷ import จ͸ʮৗʹʯਖ਼͍͠ͷ͔ʁ
    - ʮϞδϡʔϧΛղऍ͢Δػߏ࣍ୈͰಈ࡞͕ҟͳΔʯ͕౴͑
    - ྫ͑͹ɺwebpack Ͱόϯυϧ͢ΔͷͰ͋Ε͹্هͷ importจ͸ҙਤ
    ௨Γಈ࡞͢Δ
    - ҰํͰɺNode.js Ͱಈ࡞ͤ͞Δͱ Error ͱͳΔ
    

    View Slide

22. @apollo/client ΁ͷґଘؔ܎
    - ྫ͑͹ɺ @graphql-tools ഑Լͷύοέʔδʹ͸ @apollo/client ΁ͷґ
    ଘΛ͍࣋ͬͯΔ΋ͷ͕ଘࡏ͢Δ
    - https://github.com/ardatan/graphql-tools/blob/master/packages/links/package.json
    - ͜ΕΒͷύοέʔδ͕ɺNative Node.js ESM ʹରԠ͢Δ৔߹ʹ΋໰୊͕
    ੜ͡ಘΔ
    

    View Slide

23. ྫ: @graphql-tools ͷ ESM ରԠPR
    https://github.com/ardatan/graphql-tools/pull/4539/files#diff-642f0c35f55c254d08d17c88a9171eebbeb29dd090cc2badde6874a20258dab3
    

    View Slide

24. Native Node.js ESM
    - ͳͥ͜͏͍͏͜ͱ͕ى͖ͯ͠·͏ͷ͔
    - npm ύοέʔδϝϯςφʹͱͬͯɺNode.js Native ESM Λఏڙ͢Δ౔୆
    ͕੔͍ग़ͨͨ͠Ί
    - Node.js v14 Ҏ߱Ͱ͋Ε͹ Native ESM ͕ར༻Մೳ
    - TypeScript 4.7.x ͕ Node.js ޲͚ ESM Λαϙʔτ
    - @graphql-tools ͷΑ͏ͳ ʮGraphQL ༻ͷ npm ύοέʔδΛఏڙ͢Δཱ
    ৔ʯ͔Β͢ΔͱɺNode.js Native ͳ ESM ʹஔ͖׵͓͖͍͑ͯͨཉٻ͕Ұఆ
    ͋Δ
    

    View Slide

25. - ઌड़ͷ @graphql-tools/links ͷ ESM ରԠͷ݁Ռɺ react ͕ඞਢʹͳͬͯ͠·
    ͏݅͸ https://github.com/ardatan/graphql-tools/issues/4582 ʹڍ͛ΒΕͯ
    ͍Δ.
    - ٧·Δͱ͜ΖʮApollo Client ଆ͕ద੾ͳ export map Λॻ͍ͯ͘Εͳ͍ͱɺ
    ͜ͷঢ়گ͸୤٫Ͱ͖ͳ͍ʯͱ͍͏ͷ͕ Guild ଆͷҙݟ
    

    View Slide

26. Apollo Client / React / ESM ͷॴײ
    - @apollo/client Λ Node.js ͷϓϩδΣΫτ΁ؾܰʹ௥Ճ͢΂͖Ͱ͸ͳ͍
    - Node.js Native ESM ͕ա౉ظ
    - (ຊདྷෆཁͳ͸ͣͷ) react Λґଘؔ܎ʹ௥Ճͯ͠·Ͱɺ @apollo/client
    ͕ඞཁͳέʔε͸ͦ͏ͦ͏ແ͍͸ͣ
    

    View Slide

27. ͓·͚
    - Apollo Client v4 Ͱ࠶ͼ React ༻ͷϞδϡʔϧΛ opt-in ͳҐஔ͚ͮʹม
    ͑Α͏ͱ͍ͯ͠Δ
    https://github.com/apollographql/apollo-client/issues/8190
    

    View Slide