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
210
apollo client / react / esm
Yosuke Kurami
September 27, 2022
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
Next.js App Router
quramy
14
2.3k
Fragment Composition of GraphQL
quramy
14
1.7k
reg-viz VRT tools
quramy
4
900
NoInfer
quramy
0
120
Precondition with schema directives
quramy
0
1.1k
T3 Stack and TypeScript ecosystem
quramy
4
1.7k
Apollo Client useFragment
quramy
1
630
About Type Syntax Proposal
quramy
1
1.9k
GraphQLとの向き合い方2022年版
quramy
33
13k
Other Decks in Programming
See All in Programming
The grand strategy of Ruby Parser
yui_knk
5
340
RubyGems on ruby.wasm
kateinoigakukun
0
150
WebGLで始める コンピュータグラフィックス入門
heller77
0
390
JS RPCを理解する
yusukebe
5
300
otelcol receiver 自作RTA / Pepabo Tech Conference #22 春のSREまつり
arthur1
0
1.1k
Deep Dive into React Stream/Serialize
mugi_uno
4
870
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
620
Timeline エディター拡張入門
yucchiy
0
460
The Final Frontier of Web Development: React Server Components vs Jakarta EE
ivargrimstad
0
170
戦略的DDDは重いのか? / Is strategic DDD heavy?
pictiny
3
2.2k
The Design of Everyday APIs - PyCon 2024
roguelynn
1
210
[RubyKaigi 2024] Ruby Mixology 101: adding shots of PHP, Elixir, and more
palkan
0
140
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.7k
Fireside Chat
paigeccino
22
2.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
How GitHub (no longer) Works
holman
305
140k
Git: the NoSQL Database
bkeepers
PRO
423
63k
Optimizing for Happiness
mojombo
371
69k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Designing Experiences People Love
moore
136
23k
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