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
12
2k
Fragment Composition of GraphQL
quramy
13
1.6k
reg-viz VRT tools
quramy
4
870
NoInfer
quramy
0
110
Precondition with schema directives
quramy
0
1.1k
T3 Stack and TypeScript ecosystem
quramy
4
1.7k
Apollo Client useFragment
quramy
1
610
About Type Syntax Proposal
quramy
1
1.9k
GraphQLとの向き合い方2022年版
quramy
33
12k
Other Decks in Programming
See All in Programming
GNU Makeの使い方 / How to use GNU Make
kaityo256
PRO
12
4.2k
Ruby Pattern Matching
bkuhlmann
0
930
Site Reliability Engineering for GMO
pyama86
9
1.1k
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
540
禅の心を手に入れよ
eltociear
1
420
Apache Hive 4 on Treasure Data
ryukobayashi
1
450
Code Reviews
bkuhlmann
4
900
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
480
パフォーマンスを求めてDBに機能を寄せる戦略
aoyagikouhei
0
110
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
530
Fast JSX: Don't clone props object #28768
yossydev
1
200
業務ツールとして使うPostman
msys75
0
110
Featured
See All Featured
Code Review Best Practice
trishagee
56
15k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Statistics for Hackers
jakevdp
790
220k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
The Invisible Side of Design
smashingmag
294
49k
How to train your dragon (web standard)
notwaldorf
75
5.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
9
1.3k
Music & Morning Musume
bryan
41
5.6k
Rails Girls Zürich Keynote
gr2m
91
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
Writing Fast Ruby
sferik
622
60k
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