$30 off During Our Annual Pro Sale. View Details »

apollo client / react / esm

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
  2. About me - Twitter / GitHub: @Quramy - ๭ࣾͰ Web

    ϑϩϯτΤϯδχΞ΍ͬͯ·͢ - iCare Ͱ΋ GraphQL पΓͷ͓ख఻͍Λ͍ͯ͠·͢ - TypeScript ΍ GraphQL ͸ׂͱੲ͔Β΍͍ͬͯ·͢
  3. ͍͖ͳΓࠓ೔ͷ݁࿦ @apollo/client Λ Node.js Ͱ࢖͏ͷ͖ͼ͍͠

  4. @apollo/client ͱ͸ - ݴΘͣͱ஌Εͨ JavaScript ʹ͓͚Δ GraphQL ΫϥΠΞϯτϥΠϒϥϦ - ϑϩϯτΤϯυ޲͚

    GraphQL ϥΠϒϥϦͱͯ͠͸࿝ฮ. v1.0.0 ͕ϦϦʔε͞Εͨͷ͕ 2017೥ࠒ - ※ Meta(چ Facebook) ͕ GraphQL ͷ࢓༷Λެ։ͨ͠ͷ͸2015೥ - ݱߦͷ҆ఆ൛͸ v3.6.x - ※ ͍ͭ5೔ఔલʹ v3.7 ͷ RC ͕ग़·ͨ͠Ͷ 🎉
  5. @apollo/client ͷྺ࢙ - v2.x - ࡉ͔͘ npm ύοέʔδ͕ผΕ͍ͯͨ ։ൃऀ͕ඞཁʹԠͯ͡ɺݸผͷύοέʔδΛΠϯετʔϧ͍ͯͨ͠ -

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

    v3.x - all in one ͳ npm ύοέʔδʹੜ·ΕมΘͬͨ
  7. apollo-client v2.x ͦΕͧΕʹOQNJ͢Δඞཁ͕͋Δ https://github.com/Quramy/apollo-link-fragment-argument/blob/master/src/link.test.ts

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

    v3.x - all in one ͳ npm ύοέʔδʹੜ·ΕมΘͬͨ
  9. @apollo/client v3.x

  10. @apollo/client ͕ఏڙ͢Δػೳ - React ʹಛԽͨ͠ػೳ - Provider / hooks /

    SSR ޲͚ػೳ / HoC (deprecated) - React ͱಠཱͨ͠ػೳ - GraphQL client - Cache - Links
  11. React ͷ༗ແ - ʮ͍΍ɺ͏ͪ͸ React ͱ૊Έ߹Θ͍ͤͨΘ͚͡Όͳ͍Μ͚ͩͲʯͱ͍͏ Ϣʔβʔ͸Ͳ͏ͨ͠Β͍͍ͷ͔ʁ - ϑϩϯτΤϯυ: Vue.js

    / Angular / Svelte / etc... - αʔόʔαΠυ: Node.js
  12. @apollo/client v3 ͷ Entry points https://www.apollographql.com/blog/announcement/frontend/announcing-the-release-of-apollo-client-3-0/

  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 ύοέʔδ͚ͩ࢖͑ͯخ͍͠
  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 ύοέʔδ͚ͩ࢖͑ͯخ͍͠ ฏ࿨͕๚Εͨ
  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 ύοέʔδ͚ͩ࢖͑ͯخ͍͠ ฏ࿨͕๚Εͨ ͦΜͳ͜ͱ͸ͳ͔ͬͨͷͰ͋Δ
  16. - import { ApolloClient } from "@apollo/client/core" - ͜ͷ import

    จ͸ʮৗʹʯਖ਼͍͠ͷ͔ʁ
  17. ͩΊ͡ΌΜ

  18. ͜Ε΋ͩΊ

  19. Default import ?

  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 ͕͍Βͳ͍ਓ޲͚ʯͷखஈ͕ఏڙ͞Ε͍ͯͳ͍͜ͱʹͳͬͯ͠ ·͏
  21. - import { ApolloClient } from "@apollo/client/core" - ͜ͷ import

    จ͸ʮৗʹʯਖ਼͍͠ͷ͔ʁ - ʮϞδϡʔϧΛղऍ͢Δػߏ࣍ୈͰಈ࡞͕ҟͳΔʯ͕౴͑ - ྫ͑͹ɺwebpack Ͱόϯυϧ͢ΔͷͰ͋Ε͹্هͷ importจ͸ҙਤ ௨Γಈ࡞͢Δ - ҰํͰɺNode.js Ͱಈ࡞ͤ͞Δͱ Error ͱͳΔ
  22. @apollo/client ΁ͷґଘؔ܎ - ྫ͑͹ɺ @graphql-tools ഑Լͷύοέʔδʹ͸ @apollo/client ΁ͷґ ଘΛ͍࣋ͬͯΔ΋ͷ͕ଘࡏ͢Δ -

    https://github.com/ardatan/graphql-tools/blob/master/packages/links/package.json - ͜ΕΒͷύοέʔδ͕ɺNative Node.js ESM ʹରԠ͢Δ৔߹ʹ΋໰୊͕ ੜ͡ಘΔ
  23. ྫ: @graphql-tools ͷ ESM ରԠPR https://github.com/ardatan/graphql-tools/pull/4539/files#diff-642f0c35f55c254d08d17c88a9171eebbeb29dd090cc2badde6874a20258dab3

  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 ʹஔ͖׵͓͖͍͑ͯͨཉٻ͕Ұఆ ͋Δ
  25. - ઌड़ͷ @graphql-tools/links ͷ ESM ରԠͷ݁Ռɺ react ͕ඞਢʹͳͬͯ͠· ͏݅͸ https://github.com/ardatan/graphql-tools/issues/4582

    ʹڍ͛ΒΕͯ ͍Δ. - ٧·Δͱ͜ΖʮApollo Client ଆ͕ద੾ͳ export map Λॻ͍ͯ͘Εͳ͍ͱɺ ͜ͷঢ়گ͸୤٫Ͱ͖ͳ͍ʯͱ͍͏ͷ͕ Guild ଆͷҙݟ
  26. Apollo Client / React / ESM ͷॴײ - @apollo/client Λ

    Node.js ͷϓϩδΣΫτ΁ؾܰʹ௥Ճ͢΂͖Ͱ͸ͳ͍ - Node.js Native ESM ͕ա౉ظ - (ຊདྷෆཁͳ͸ͣͷ) react Λґଘؔ܎ʹ௥Ճͯ͠·Ͱɺ @apollo/client ͕ඞཁͳέʔε͸ͦ͏ͦ͏ແ͍͸ͣ
  27. ͓·͚ - Apollo Client v4 Ͱ࠶ͼ React ༻ͷϞδϡʔϧΛ opt-in ͳҐஔ͚ͮʹม

    ͑Α͏ͱ͍ͯ͠Δ https://github.com/apollographql/apollo-client/issues/8190