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

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

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

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

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

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

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

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

@apollo/client v3.x

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

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

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

@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 ύοέʔδ͚ͩ࢖͑ͯخ͍͠

@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 ύοέʔδ͚ͩ࢖͑ͯخ͍͠ ฏ࿨͕๚Εͨ

@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 ύοέʔδ͚ͩ࢖͑ͯخ͍͠ ฏ࿨͕๚Εͨ ͦΜͳ͜ͱ͸ͳ͔ͬͨͷͰ͋Δ

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

ͩΊ͡ΌΜ

͜Ε΋ͩΊ

Default import ?

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

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

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

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

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 ʹஔ͖׵͓͖͍͑ͯͨཉٻ͕Ұఆ ͋Δ

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

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

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