Upgrade to Pro — share decks privately, control downloads, hide ads and more …

apollo client / react / esm

Yosuke Kurami
September 27, 2022

apollo client / react / esm

Yosuke Kurami

September 27, 2022
Tweet

More Decks by Yosuke Kurami

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. @apollo/client v3.x

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

  17. Default import ?

    View full-size slide

  18. Ͳ͏ͯ͜͠͏ͳͬͪΌ͏ͷ
    - @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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide