apollo client / react / esm

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 ͦΕͧΕʹ
   OQN
   J
   ͢Δඞཁ͕͋Δ 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