Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Apollo Client Cache
kobayang
October 10, 2019
Technology
0
590
Apollo Client Cache
kobayang
October 10, 2019
Tweet
Share
More Decks by kobayang
See All by kobayang
React Hooks を安全に使う
kobayang
2
960
Puppeteerを導入してみた話
kobayang
2
74k
ゼロから学ぶWeb Authentication API
kobayang
0
780
react-beautiful-dnd を使いたかった話
kobayang
2
1.3k
Other Decks in Technology
See All in Technology
Adopting Kafka for the #1 job site in the world
ymyzk
1
250
Microsoft 365の中でのPower BIの利用 / M365VM2022
ishiayaya
0
1.4k
CADDi HCMC Technology Center
caddi_eng
0
210
~スタートアップの人たちに捧ぐ~ 監視再入門 in AWS
track3jyo
PRO
30
8.3k
AWS CLI入門_20220513
suzakiyoshito
0
3.4k
TypeScript 4.7と型レベルプログラミング
uhyo
5
2.8k
Babylon.jsで3DViewerを作ってみた!!!
iwaken71
0
460
Understanding Python attributes
reuven
0
550
GitHub 엔터프라이즈 어카운트 소개 및 엔터프라이즈 서버 구축 경험
posquit0
1
130
220428event_karibe_part
caddi_eng
0
180
動画配信技術について
yaminoma
0
180
暗号資産ウォレット入門(MetaMaskの入門~NFTの購入~詐欺の注意事項など)
kayato
2
150
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
113
6.9k
Teambox: Starting and Learning
jrom
121
7.6k
YesSQL, Process and Tooling at Scale
rocio
157
12k
Agile that works and the tools we love
rasmusluckow
319
19k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
172
8.3k
Happy Clients
brianwarren
89
5.5k
GraphQLの誤解/rethinking-graphql
sonatard
24
6.2k
Infographics Made Easy
chrislema
233
17k
Building an army of robots
kneath
299
40k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
655
120k
Automating Front-end Workflow
addyosmani
1351
200k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Transcript
©2018 Wantedly, Inc. Apollo Client Cache meguro.es 2019.10.10 - Naoki
Kobayashi
©2018 Wantedly, Inc. Naoki Kobayashi GitHub: @kobayang Twitter: @kbys_02 I’m
an Frontend Engineer @Wantedly
©2018 Wantedly, Inc. https://blog.apollographql.com/introducing-the-apollo-graphql-platform-8ef34bb269e5 cache
©2018 Wantedly, Inc. { Declare GraphQL Query Use Query to
fetch data const TodoContainer = () => { const { data, loading, error } = useQuery(todosQuery); const todos = data ? data.todos : []; } const todosQuery = gql` query TodosQuery { todos { id title } } `;
©2018 Wantedly, Inc. Agenda • Apollo Client ͷ Cache ͍ͭߦΘΕΔ͔
• ͲͷΑ͏ʹCacheͷߋ৽Λߦ͏͔ • ͲΜͳσʔλ͕Cacheʹೖ͍ͬͯΔ͔ • Cacheͷߋ৽ͷ࠷దԽ
©2018 Wantedly, Inc. Fetch Data Flow User Interface Fetch Cache
3FRVFTUUP UIFTFSWFS .PVOUPSVTFSBDUJPO USJHHFSTGFUDI Apollo Server 3FBEDBDIF
©2018 Wantedly, Inc. Prefetching Data https://www.apollographql.com/docs/react/performance/performance/ onMouseOver Ͱ query ΛಡࠐΉ
LinkઌͰಉ͡ΫΤϦΛಡࠐΉͱ Cache͕ώοτ͢ΔͨΊɺ Loadingͳ͠ͰData͕͑Δ
©2018 Wantedly, Inc. Local State Management https://www.apollographql.com/docs/react/performance/performance/ • CacheΛར༻ͯ͠LocalͷStateΛѻ͑Δ •
@client directive Λ Query/Mutation ʹ ͚ͭΔ͜ͱͰऔಘઌ͕ϩʔΧϧʹͳΔ # local-schema.grpahql extend type Todo { done: Boolean! } // apollo.ts const resolvers: Resolvers = { Todo: { done(todo: TodoFragment) { return todo.done || false; }, }, }; const todoFragment = gql` fragment TodoFragment on Todo { id title done @client } `;
©2018 Wantedly, Inc. InMemoryCache https://medium.com/expedia-group-tech/creating-your-own-apollo-cache-for-perf-and-profit-8f786849e5f6 • ApolloClientͷΩϟογϡͷσϑΥϧτ࣮ • Ωϟογϡ͢ΔࡍʹσʔλΛਖ਼نԽ͢Δ(Normalize)
©2018 Wantedly, Inc. Mutation Data Flow User Interface Mutation Apollo
Server Cache 3FRVFTUUPUIFTFSWFS VTFSBDUJPO USJHHFSTNVUBUJPO 4UPSFDIBOHFT ESJWFT6*
©2018 Wantedly, Inc. Mutation Data Flow User Interface Mutation Apollo
Server Cache 3FRVFTUUPUIFTFSWFS VTFSBDUJPO USJHHFSTNVUBUJPO 4UPSFDIBOHFT ESJWFT6* ࣮͢Δඞཁ͕͋Δ
©2018 Wantedly, Inc. ྫ: TodoͷՃ BEE5PEP.VUBUJPO UPEPT2VFSZ const todosQuery =
gql` query TodosQuery { todos { id title } } `;
©2018 Wantedly, Inc. ྫ: refetchQueries const addTodoMutation = gql` mutation
AddTodoMutation($title: String!) { addTodo(title: $title) { id title } } `; const [addTodo] = useMutation(addTodoMutation, { refetchQueries: [{ query: todosQuery }], }); Cache 3FGFUDI 4FSWFS3FTQPOTF
©2018 Wantedly, Inc. ྫ: update const [addTodo] = useMutation(addTodoMutation, {
update: (cache, { data }) => { const cachedQuery = cache.readQuery({ query: todosQuery }); if (!cachedQuery || !data) { throw new Error(); } const todos = cachedQuery.todos; cache.writeQuery({ query: todosQuery, data: { todos: todos.concat([data.addTodo]) }, }); }, }); 4FSWFS3FTQPOTF Cache
©2018 Wantedly, Inc. ΩϟογϡΛ͍ͯΈΔ Apollo Client Developer Tools: ΩϟογϡͷதΛ֬ೝͰ͖Δ
©2018 Wantedly, Inc. dataIdFromObject https://github.com/apollographql/apollo-client/blob/22a450aace/packages/apollo-cache-inmemory/src/inMemoryCache.ts
©2018 Wantedly, Inc. readFragment const data = client.readFragment<TodoFragment>({ id: "Todo:1",
fragment: todoFragment, }); console.log(data); // => { id: 1, title: "ൃදࢿྉΛ࡞Δ", __typename: "Todo" }
©2018 Wantedly, Inc. id͕ͳ͍߹ • ROOT_QUERY.todos.0 ͷΑ͏ʹ ROOT_QUERY ʹඥ͍ͮͯΩϟογϡ͞ΕΔ
const todosQuery = gql` query TodosQuery { todos { title } } `;
©2018 Wantedly, Inc. id͕ͳ͍߹ • ࣮readFragmentͰऔಘͰ͖Δ const data = client.readFragment<TodoFragment>({
id: “ROOT_QUERY.todos.0”, fragment: todoFragment, }); console.log(data); // => { title: "ൃදࢿྉΛ࡞Δ", __typename: "Todo" }
©2018 Wantedly, Inc. Mutation Data Flowʢ࠶ܝʣ User Interface Mutation Apollo
Server Cache 3FRVFTUUPUIFTFSWFS VTFSBDUJPO USJHHFSTNVUBUJPO 4UPSFDIBOHFT ESJWFT6*
©2018 Wantedly, Inc. Optimistic Response Mutation Apollo Server Cache User
Interface Optimistic Response
©2018 Wantedly, Inc. Optimistic Response Mutation ͷҾʹՃ optimisticResponse: vars =>
({ addTodo: { id: "-1", title: vars.title, __typename: "Todo", }, }), update: (cache, { data }) => { console.log("update", data); //… } updatemutation࣮ߦ࣌ͱߋ৽࣌ʹ 2ճݺΕΔ
©2018 Wantedly, Inc. Optimistic Response ApolloCache removeOptimistic Ͱ optimisticResponseͷΩϟογϡআ͞ΕΔ https://github.com/apollographql/apollo-client/blob/22a450aace/packages/apollo-cache-inmemory/src/inMemoryCache.ts#L251
©2018 Wantedly, Inc. ·ͱΊ • Apollo ClientʹΩϟογϡͷΈ͕͋Γ Fetchͨ͠σʔλΛਖ਼نԽͯ͠Ωϟογϡ͍ͯ͠Δ • Mutation࣌ɺঢ়گʹ߹Θͤͯ
refetchQueries, update, optimisticResponse Λ࣮ͯ͠ΩϟογϡΛߋ৽ͤ͞Δඞཁ͕͋Δ • ΩϟογϡΛҙࣝ͢Δ͜ͱͰύϑΥʔϚϯεΛ্ͤ͞Δ͜ͱ͕Ͱ͖Δ