Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Local State Management with Apollo

Avatar for Kodai Nakamura Kodai Nakamura
August 23, 2018
Programming
1.6k
2

Local State Management with Apollo

Avatar for Kodai Nakamura

Kodai Nakamura

August 23, 2018

More Decks by Kodai Nakamura

See All by Kodai Nakamura
React Fire
Avatar for Kodai Nakamura kdnk
2
1.5k
wejs24.pdf
Avatar for Kodai Nakamura kdnk
1
1.2k
React Suspense on Apollo
Avatar for Kodai Nakamura kdnk
4
1.6k

Other Decks in Programming

See All in Programming
新卒PdEのリアル
Avatar for ryu ryu1013
1
420
ALB ログから Trace を気合で繋げる技術
Avatar for Hayato Kawai fohte
7
880
AIエージェント時代のコードレビューを設計する
Avatar for nogu nogu66
6
2.5k
LL言語やWebフレームワークの PostgreSQL対応 〜DBの機能がユーザーに届くまで〜
Avatar for 武田 憲太郎 kentaroutakeda
0
140
LoopHub - ローカルで動く GitHub で、AI と共同開発
Avatar for jugyo jugyo
0
460
不幸な GC
Avatar for Chen chencmd
0
890
Can LLMs Replicate 4 Years of Compose Migration? Exploring the boundaries of automation with 279 XML files from a real product
Avatar for makun makun
0
130
Hono + Inertia + React で LP を構築した話
Avatar for Yuka Ooka oukayuka
2
220
まだ間に合う！今年の夏こそSchemeのマクロ展開器を完全理解！
Avatar for Masanori Ogino omasanori
0
640
kubernetes コンポーネント開発入門 / 新卒N年目の勉強会&交流会！〜〇〇への誘い〜 #n_study
Avatar for mazrean mazrean
0
170
thread_parallel_with_free-threaded_Python_and_NumPy.pdf
Avatar for Riku Sakamoto riku_sakamoto
0
140
AI時代に学ぶ 好きなルール 嫌いなルール Linter編
Avatar for Shota Nemoto shorty5121
0
880

Featured

See All Featured
It's Worth the Effort
Avatar for 3n 3n
188
29k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
2.1k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
3
1.2k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2.1k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
4
590
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
2
14k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
19k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.6k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
1
34k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
650
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1.6k

Transcript

  1. ©2018 Wantedly, Inc. -PDBM4UBUF.BOBHFNFOU
 XJUI"QPMMP Roppongi.js #5 23th.Aug.2018 - Kodai

    Nakamura

  2. ©2018 Wantedly, Inc. -PDBM4UBUF.BOBHFNFOU
 XJUI"QPMMP Roppongi.js #5 23th.Aug.2018 - Kodai

    Nakamura

  3. ©2018 Wantedly, Inc. Kodai Nakamura Github: @kdnk Twitter: @kdnk__ Software

    Engineer at Wantedly, inc. JavaScript, TypeScript, React, Rails, Ruby

  4. ©2018 Wantedly, Inc. (SBQI2-Ͱͷ4UBUF.BOBHFNFOU ʹ͍ͭͯ࿩͠·͢

  5. ©2018 Wantedly, Inc. BQPMMPMJOLTUBUF

  6. ©2018 Wantedly, Inc. "QPMMPͰ4UBUFΛͲ͏΍ͬͯѻ͏͔ ‣ 3FEVYͱ͔.PC9ͱ͔Λ࢖͏  ‣ "QPMMPʹ͸$BDIFͷ࢓૊Έ͕͋Δ ‣

    6*ͷঢ়ଶ͸3FEVY αʔό͔Βऔ͖ͬͯͨσʔλ͸"QPMMPͷ$BDIF

  7. ©2018 Wantedly, Inc. ‣ 4UBUF͕ͭʹͳΔ  z4JOHMFTPVSDFPGUSVUIz ‣ 4UBUFಉ࢜ͷ੔߹ΛऔΔͷ͕໘౗ ‣

    σʔλͷߋ৽ํ๏͕ҧ͏  BDUJPOΛEJTQBUDIͯ͠SFEVDFS͕TUBUFΛߋ৽  RVFSZNVUBUJPO େมͦ͏ͳͱ͜Ζ

  8. ©2018 Wantedly, Inc. BQPMMPMJOLTUBUF ‣ (SBQI2-͸σʔλΛऔͬͯ͘ΔͨΊͷΫΤϦݴޠ ‣ ର৅͸αʔό͚ͩͰ͸ͳ͍ ‣ -PDBMͷσʔλͷߋ৽Λී௨ͷRVFSZNVUBUJPOͷΑ͏ʹߦ͑Δ

    ‣ 3FEVYͰ͍͏TUPSF͕BQPMMPͷDBDIF

  9. ©2018 Wantedly, Inc. BQPMMPMJOLTUBUF import { ApolloClient } from 'apollo-client';

    import { InMemoryCache } from 'apollo-cache-inmemory'; import { ApolloLink } from 'apollo-link'; import { withClientState } from 'apollo-link-state'; import { HttpLink } from 'apollo-link-http'; import { defaults, resolvers } from './resolvers/todos'; const cache = new InMemoryCache(); const stateLink = withClientState({ resolvers, cache, defaults }); const client = new ApolloClient({ cache, link: ApolloLink.from([stateLink, new HttpLink()]), }); import { ApolloClient } from 'apollo-client'; import { HttpLink } from 'apollo-link-http'; import { InMemoryCache } from 'apollo-cache-inmemory'; const client = new ApolloClient({ link: new HttpLink(), cache: new InMemoryCache(), });

  10. ©2018 Wantedly, Inc. BQPMMPMJOLTUBUF import { ApolloClient } from 'apollo-client';

    import { InMemoryCache } from 'apollo-cache-inmemory'; import { ApolloLink } from 'apollo-link'; import { withClientState } from 'apollo-link-state'; import { HttpLink } from 'apollo-link-http'; import { defaults, resolvers } from './resolvers/todos'; const cache = new InMemoryCache(); const stateLink = withClientState({ resolvers, cache, defaults }); const client = new ApolloClient({ cache, link: ApolloLink.from([stateLink, new HttpLink()]), }); import { ApolloClient } from 'apollo-client'; import { HttpLink } from 'apollo-link-http'; import { InMemoryCache } from 'apollo-cache-inmemory'; const client = new ApolloClient({ link: new HttpLink(), cache: new InMemoryCache(), }); ;ͭ͏ͷ"QPMMP

  11. ©2018 Wantedly, Inc. BQPMMPMJOLTUBUF import { ApolloClient } from 'apollo-client';

    import { InMemoryCache } from 'apollo-cache-inmemory'; import { ApolloLink } from 'apollo-link'; import { withClientState } from 'apollo-link-state'; import { HttpLink } from 'apollo-link-http'; import { defaults, resolvers } from './resolvers/todos'; const cache = new InMemoryCache(); const stateLink = withClientState({ resolvers, cache, defaults }); const client = new ApolloClient({ cache, link: ApolloLink.from([stateLink, new HttpLink()]), }); import { ApolloClient } from 'apollo-client'; import { HttpLink } from 'apollo-link-http'; import { InMemoryCache } from 'apollo-cache-inmemory'; const client = new ApolloClient({ link: new HttpLink(), cache: new InMemoryCache(), }); ;ͭ͏ͷ"QPMMP

  12. ©2018 Wantedly, Inc. BQPMMPMJOLTUBUF import { ApolloClient } from 'apollo-client';

    import { InMemoryCache } from 'apollo-cache-inmemory'; import { ApolloLink } from 'apollo-link'; import { withClientState } from 'apollo-link-state'; import { HttpLink } from 'apollo-link-http'; import { defaults, resolvers } from './resolvers/todos'; const cache = new InMemoryCache(); const stateLink = withClientState({ resolvers, cache, defaults }); const client = new ApolloClient({ cache, link: ApolloLink.from([stateLink, new HttpLink()]), }); import { ApolloClient } from 'apollo-client'; import { HttpLink } from 'apollo-link-http'; import { InMemoryCache } from 'apollo-cache-inmemory'; const client = new ApolloClient({ link: new HttpLink(), cache: new InMemoryCache(), }); BQPMMPMJOLTUBUFΛ࢖͏ͱ͖

  13. ©2018 Wantedly, Inc. BQPMMPMJOLTUBUF import { ApolloClient } from 'apollo-client';

    import { InMemoryCache } from 'apollo-cache-inmemory'; import { ApolloLink } from 'apollo-link'; import { withClientState } from 'apollo-link-state'; import { HttpLink } from 'apollo-link-http'; import { defaults, resolvers } from './resolvers/todos'; const cache = new InMemoryCache(); const stateLink = withClientState({ resolvers, cache, defaults }); const client = new ApolloClient({ cache, link: ApolloLink.from([stateLink, new HttpLink()]), }); import { ApolloClient } from 'apollo-client'; import { HttpLink } from 'apollo-link-http'; import { InMemoryCache } from 'apollo-cache-inmemory'; const client = new ApolloClient({ link: new HttpLink(), cache: new InMemoryCache(), }); BQPMMPMJOLTUBUFΛ࢖͏ͱ͖

  14. ©2018 Wantedly, Inc. BQPMMPMJOLTUBUF import { ApolloClient } from 'apollo-client';

    import { InMemoryCache } from 'apollo-cache-inmemory'; import { ApolloLink } from 'apollo-link'; import { withClientState } from 'apollo-link-state'; import { HttpLink } from 'apollo-link-http'; import { defaults, resolvers } from './resolvers/todos'; const cache = new InMemoryCache(); const stateLink = withClientState({ resolvers, cache, defaults }); const client = new ApolloClient({ cache, link: ApolloLink.from([stateLink, new HttpLink()]), }); import { ApolloClient } from 'apollo-client'; import { HttpLink } from 'apollo-link-http'; import { InMemoryCache } from 'apollo-cache-inmemory'; const client = new ApolloClient({ link: new HttpLink(), cache: new InMemoryCache(), }); BQPMMPMJOLTUBUFΛ࢖͏ͱ͖

  15. ©2018 Wantedly, Inc. BQPMMPMJOLTUBUF import { ApolloClient } from 'apollo-client';

    import { InMemoryCache } from 'apollo-cache-inmemory'; import { ApolloLink } from 'apollo-link'; import { withClientState } from 'apollo-link-state'; import { HttpLink } from 'apollo-link-http'; import { defaults, resolvers } from './resolvers/todos'; const cache = new InMemoryCache(); const stateLink = withClientState({ resolvers, cache, defaults }); const client = new ApolloClient({ cache, link: ApolloLink.from([stateLink, new HttpLink()]), }); import { ApolloClient } from 'apollo-client'; import { HttpLink } from 'apollo-link-http'; import { InMemoryCache } from 'apollo-cache-inmemory'; const client = new ApolloClient({ link: new HttpLink(), cache: new InMemoryCache(), }); BQPMMPMJOLTUBUFΛ࢖͏ͱ͖

  16. ©2018 Wantedly, Inc. !DMJFOU BQPMMPMJOLTUBUF ‣ Ͳ͜ʹΫΤϦΛ౤͛Δ͔Λࣔ͢EJSFDUJWF ‣ ͜Ε͕͍͍ͭͯΔͱ
 MPDBMͷDBDIFʹରͯ͠ΫΤϦΛ౤͛Δ

    const SET_VISIBILITY = gql` mutation SetFilter($filter: String!) { visibilityFilter(filter: $filter) @client } `; <Mutation mutation={SET_VISIBILITY}> {mutate => { return <>// ...</>; }} </Mutation>

  17. ©2018 Wantedly, Inc. !DMJFOU BQPMMPMJOLTUBUF const SET_VISIBILITY = gql` mutation

    SetFilter($filter: String!) { visibilityFilter(filter: $filter) @client } `; <Mutation mutation={SET_VISIBILITY}> {mutate => { return <>// ...</>; }} </Mutation> ‣ Ͳ͜ʹΫΤϦΛ౤͛Δ͔Λࣔ͢EJSFDUJWF ‣ ͜Ε͕͍͍ͭͯΔͱ
 MPDBMͷDBDIFʹରͯ͠ΫΤϦΛ౤͛Δ

  18. ©2018 Wantedly, Inc. !DMJFOU BQPMMPMJOLTUBUF const SET_VISIBILITY = gql` mutation

    SetFilter($filter: String!) { visibilityFilter(filter: $filter) @client } `; <Mutation mutation={SET_VISIBILITY}> {mutate => { return <>// ...</>; }} </Mutation> ‣ Ͳ͜ʹΫΤϦΛ౤͛Δ͔Λࣔ͢EJSFDUJWF ‣ ͜Ε͕͍͍ͭͯΔͱ
 MPDBMͷDBDIFʹରͯ͠ΫΤϦΛ౤͛Δ

  19. ©2018 Wantedly, Inc. EFGBVMUT BQPMMPMJOLTUBUF ‣ DBDIFͷॳظ஋ ‣ SFEVYͩͱJOJUJBMTUBUF export

    const defaults = { visibilityFilter: 'SHOW_ALL', todos: [], };

  20. ©2018 Wantedly, Inc. SFTPMWFST BQPMMPMJOLTUBUF ‣ "QPMMP4FSWFSͰ͸ɺ2VFSZ.VUBUJPOʹରԠ͢Δɺ
 ࣮ࡍʹσʔλΛऔಘ͢Δؔ਺ ‣ BQPMMPMJOLTUBUFͰ͸ɺDBDIF͔ΒͷऔಘɾDBDIFʹର͢Δૢ࡞ͳͲ

    ͷॲཧ͕هड़͞ΕΔͱ͜Ζ

  21. ©2018 Wantedly, Inc. SFTPMWFST export const resolvers = { Mutation:

    { visibilityFilter: (_, { filter }, { cache }) => { cache.writeData({ data: { visibilityFilter: filter } }); return null; }, addTodo: (_, { text }, { cache }) => { const query = gql` query GetTodos { todos @client { id text completed } } `; const previous = cache.readQuery({ query }); const newTodo = { id: nextTodoId++, text, completed: false, __typename: 'TodoItem', }; const data = { todos: previous.todos.concat([newTodo]), }; cache.writeData({ data }); return newTodo; }, } }

  22. ©2018 Wantedly, Inc. export const resolvers = { Mutation: {

    visibilityFilter: (_, { filter }, { cache }) => { cache.writeData({ data: { visibilityFilter: filter } }); return null; }, addTodo: (_, { text }, { cache }) => { const query = gql` query GetTodos { todos @client { id text completed } } `; const previous = cache.readQuery({ query }); const newTodo = { id: nextTodoId++, text, completed: false, __typename: 'TodoItem', }; const data = { todos: previous.todos.concat([newTodo]), }; cache.writeData({ data }); return newTodo; }, } } SFTPMWFST

  23. ©2018 Wantedly, Inc. export const resolvers = { Mutation: {

    visibilityFilter: (_, { filter }, { cache }) => { cache.writeData({ data: { visibilityFilter: filter } }); return null; }, addTodo: (_, { text }, { cache }) => { const query = gql` query GetTodos { todos @client { id text completed } } `; const previous = cache.readQuery({ query }); const newTodo = { id: nextTodoId++, text, completed: false, __typename: 'TodoItem', }; const data = { todos: previous.todos.concat([newTodo]), }; cache.writeData({ data }); return newTodo; }, } } SFTPMWFST

  24. ©2018 Wantedly, Inc. export const resolvers = { Mutation: {

    visibilityFilter: (_, { filter }, { cache }) => { cache.writeData({ data: { visibilityFilter: filter } }); return null; }, addTodo: (_, { text }, { cache }) => { const query = gql` query GetTodos { todos @client { id text completed } } `; const previous = cache.readQuery({ query }); const newTodo = { id: nextTodoId++, text, completed: false, __typename: 'TodoItem', }; const data = { todos: previous.todos.concat([newTodo]), }; cache.writeData({ data }); return newTodo; }, } } SFTPMWFST

  25. ©2018 Wantedly, Inc. ·ͱΊ ‣ (SBQI2-͸MPDBMʹͳΔσʔλʹରͯ͠΋౤͛ΕΔ ‣ "QPMMP͚ͩͰ4BUF؅ཧͰ͖Δ ‣ SFEVYͷϘΠϥʔϓϨʔτΛॻ͔ͳ͍͍͔ͯ͘ΒεοΩϦ͢Δ