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

Local State Management with Apollo

8ad58ff2bfccf7b4c07b34000c1d6afd?s=47 Kodai Nakamura
August 23, 2018
Programming
2
1k

Local State Management with Apollo

8ad58ff2bfccf7b4c07b34000c1d6afd?s=128

Kodai Nakamura

August 23, 2018
Tweet

More Decks by Kodai Nakamura

See All by Kodai Nakamura
React Fire
8ad58ff2bfccf7b4c07b34000c1d6afd?s=48 kdnk
2
950
wejs24.pdf
8ad58ff2bfccf7b4c07b34000c1d6afd?s=48 kdnk
1
680
React Suspense on Apollo
8ad58ff2bfccf7b4c07b34000c1d6afd?s=48 kdnk
4
1.1k

Other Decks in Programming

See All in Programming
How to start contributing to Kubernetes Projects
Db3181d9b15867e445d87720bfc59577?s=48 ydfu
0
130
リーダブルテストコード / #vstat
48a913a2e3bb5e68aae6f73079648e84?s=48 jnchito
47
35k
Scaling Productivity- How we have improved our dev experience
63c8b0590595c3de58406678ef99a6bf?s=48 sockeqwe
1
120
Untangling Coroutine Testing (Droidcon Berlin 2022)
4047c64e3a1e2f81addd4ba675ddc451?s=48 zsmb
1
480
RustのWebフレームワーク周りの概観
E42cffccdc14c60a449caac8de0ce0e0?s=48 hayao
0
170
Reactは何を提供するLibraryなのか？
2801ae8fb5381bcd119805124a5eeaf2?s=48 taro28
6
920
Atomic Design とテストの○○な話
Fd3e212c7b5255c6164d7d52bfe79dfb?s=48 takfjp
2
800
閱讀原始碼 - 再戰十年的 jQuery
Dbfa12cd7e1ff8b06a588609369d6e49?s=48 eddie
1
290
Better Angular Architectures: Architectures with Standalone Components @DWX2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
1
390
クラウド KMS の活用 / TOKYO BLOCKCHAIN TECH MEETUP 2022
00766b8e1f9c2665cf7fd29f9cf558df?s=48 odanado
PRO
0
180
アジャイルで不確実性に向き合うための開発タスクの切り方
444706893bf3e53d6d96b4509d2d05d5?s=48 tanden
4
1.1k
料理の注文メニューの3D化への挑戦
Fbe7836c8ca96e3099dd5bbd83d1a391?s=48 hideg
0
280

Featured

See All Featured
Build your cross-platform service in a week with App Engine
5f83ef806155b403c3393160ce51f955?s=48 jlugia
219
17k
Code Reviewing Like a Champion
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
506
37k
5 minutes of I Can Smell Your CMS
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
196
18k
Streamline your AJAX requests with AmplifyJS and jQuery
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
127
8.5k
Dealing with People You Can't Stand - Big Design 2015
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
351
21k
Designing Dashboards & Data Visualisations in Web Apps
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
224
49k
How STYLIGHT went responsive
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
85
4k
KATA
E9221b172e78e888355fa2fe4541b595?s=48 mclloyd
7
8.8k
Fireside Chat
864a009ac73600c7c02e1f26629dd989?s=48 paigeccino
13
1.4k
Six Lessons from altMBA
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
14
1.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
119
28k
We Have a Design System, Now What?
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
35
3k

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ͷϘΠϥʔϓϨʔτΛॻ͔ͳ͍͍͔ͯ͘ΒεοΩϦ͢Δ