Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

    ϑϩϯτΤϯδχΞ΍ͬͯ·͢ - iCare Ͱ΋ GraphQL पΓͷ͓ख఻͍Λ͍ͯ͠·͢ - TypeScript ΍ GraphQL ͸ׂͱੲ͔Β΍͍ͬͯ·͢
  2. @apollo/client ͱ͸ - ݴΘͣͱ஌Εͨ JavaScript ʹ͓͚Δ GraphQL ΫϥΠΞϯτϥΠϒϥϦ - ϑϩϯτΤϯυ޲͚

    GraphQL ϥΠϒϥϦͱͯ͠͸࿝ฮ. v1.0.0 ͕ϦϦʔε͞Εͨͷ͕ 2017೥ࠒ - ※ Meta(چ Facebook) ͕ GraphQL ͷ࢓༷Λެ։ͨ͠ͷ͸2015೥ - ݱߦͷ҆ఆ൛͸ v3.6.x - ※ ͍ͭ5೔ఔલʹ v3.7 ͷ RC ͕ग़·ͨ͠Ͷ 🎉
  3. @apollo/client ͕ఏڙ͢Δػೳ - React ʹಛԽͨ͠ػೳ - Provider / hooks /

    SSR ޲͚ػೳ / HoC (deprecated) - React ͱಠཱͨ͠ػೳ - GraphQL client - Cache - Links
  4. @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 ύοέʔδ͚ͩ࢖͑ͯخ͍͠
  5. @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 ύοέʔδ͚ͩ࢖͑ͯخ͍͠ ฏ࿨͕๚Εͨ
  6. @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 ύοέʔδ͚ͩ࢖͑ͯخ͍͠ ฏ࿨͕๚Εͨ ͦΜͳ͜ͱ͸ͳ͔ͬͨͷͰ͋Δ
  7. Ͳ͏ͯ͜͠͏ͳͬͪΌ͏ͷ - @apollo/client ͷαϒσΟϨΫτϦ (/coreͳͲ) ͸ Node.js Ͱར༻Մೳͳ ESM ͱͯ͠

    Publish͞Ε͍ͯͳ͍ - ผͷ Node.js ESM ͳ ύοέʔδ͔Βڐ͞ΕΔ import จ͸ import AC from "@apollo/client" ͷܗࣜͷΈ - @apollo/client શମΛ load ͢Δ͜ͱʹͳΓɺreact ύοέʔδ͕ແ͍ͱ "Cannot find module" ͷΤϥʔͰམͪΔ - ݁ہʮ react ͕͍Βͳ͍ਓ޲͚ʯͷखஈ͕ఏڙ͞Ε͍ͯͳ͍͜ͱʹͳͬͯ͠ ·͏
  8. - import { ApolloClient } from "@apollo/client/core" - ͜ͷ import

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

    https://github.com/ardatan/graphql-tools/blob/master/packages/links/package.json - ͜ΕΒͷύοέʔδ͕ɺNative Node.js ESM ʹରԠ͢Δ৔߹ʹ΋໰୊͕ ੜ͡ಘΔ
  10. 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 ʹஔ͖׵͓͖͍͑ͯͨཉٻ͕Ұఆ ͋Δ
  11. - ઌड़ͷ @graphql-tools/links ͷ ESM ରԠͷ݁Ռɺ react ͕ඞਢʹͳͬͯ͠· ͏݅͸ https://github.com/ardatan/graphql-tools/issues/4582

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

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

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