Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
apollo client / react / esm
Search
Yosuke Kurami
September 27, 2022
Programming
1
350
apollo client / react / esm
Yosuke Kurami
September 27, 2022
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
TypeScript LSP の今までとこれから
quramy
1
570
フロントエンドテストの育て方
quramy
12
3.4k
App Router 悲喜交々
quramy
8
620
上手に付き合うコンポーネントテスト
quramy
6
2.1k
Patched fetch did not work
quramy
6
690
GraphQL あるいは React における自律的なデータ取得について
quramy
18
5.3k
Next.js App Router
quramy
15
3.6k
Fragment Composition of GraphQL
quramy
16
4k
reg-viz VRT tools
quramy
4
1.4k
Other Decks in Programming
See All in Programming
技術同人誌をMCP Serverにしてみた
74th
1
620
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
140
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
640
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
760
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
520
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
220
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
660
PipeCDのプラグイン化で目指すところ
warashi
1
260
NPOでのDevinの活用
codeforeveryone
0
780
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
600
CursorはMCPを使った方が良いぞ
taigakono
1
240
XP, Testing and ninja testing
m_seki
3
230
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
RailsConf 2023
tenderlove
30
1.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
52k
Stop Working from a Prison Cell
hatefulcrawdad
270
21k
Music & Morning Musume
bryan
46
6.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Code Review Best Practice
trishagee
69
18k
Docker and Python
trallard
44
3.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Transcript
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