Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Local State Management with Apollo
Kodai Nakamura
August 23, 2018
Programming
2
830
Local State Management with Apollo
Kodai Nakamura
August 23, 2018
Tweet
Share
More Decks by Kodai Nakamura
See All by Kodai Nakamura
kdnk
2
790
kdnk
1
570
kdnk
0
150
kdnk
4
870
kdnk
0
370
Other Decks in Programming
See All in Programming
manfredsteyer
PRO
0
120
madai0517
1
200
manfredsteyer
PRO
0
110
grapecity_dev
0
170
alperhankendi
1
150
takapy
0
110
grapecity_dev
0
200
grapecity_dev
0
170
danilop
0
230
ryosukes
0
1.4k
sansuke05
1
140
hyodol2513
0
600
Featured
See All Featured
roundedbygravity
242
21k
bermonpainter
342
26k
schacon
145
6.6k
eitanlees
112
10k
jacobian
255
20k
malarkey
193
8.6k
chriscoyier
498
130k
holman
461
280k
philhawksworth
192
8.8k
denniskardys
219
120k
ammeep
655
54k
reverentgeek
27
2k
Transcript
©2018 Wantedly, Inc. -PDBM4UBUF.BOBHFNFOU XJUI"QPMMP Roppongi.js #5 23th.Aug.2018 - Kodai
Nakamura
©2018 Wantedly, Inc. -PDBM4UBUF.BOBHFNFOU XJUI"QPMMP Roppongi.js #5 23th.Aug.2018 - Kodai
Nakamura
©2018 Wantedly, Inc. Kodai Nakamura Github: @kdnk Twitter: @kdnk__ Software
Engineer at Wantedly, inc. JavaScript, TypeScript, React, Rails, Ruby
©2018 Wantedly, Inc. (SBQI2-Ͱͷ4UBUF.BOBHFNFOU ʹ͍ͭͯ͠·͢
©2018 Wantedly, Inc. BQPMMPMJOLTUBUF
©2018 Wantedly, Inc. "QPMMPͰ4UBUFΛͲ͏ͬͯѻ͏͔ ‣ 3FEVYͱ͔.PC9ͱ͔Λ͏ ‣ "QPMMPʹ$BDIFͷΈ͕͋Δ ‣
6*ͷঢ়ଶ3FEVY αʔό͔Βऔ͖ͬͯͨσʔλ"QPMMPͷ$BDIF
©2018 Wantedly, Inc. ‣ 4UBUF͕ͭʹͳΔ z4JOHMFTPVSDFPGUSVUIz ‣ 4UBUFಉ࢜ͷ߹ΛऔΔͷ͕໘ ‣
σʔλͷߋ৽ํ๏͕ҧ͏ BDUJPOΛEJTQBUDIͯ͠SFEVDFS͕TUBUFΛߋ৽ RVFSZNVUBUJPO େมͦ͏ͳͱ͜Ζ
©2018 Wantedly, Inc. BQPMMPMJOLTUBUF ‣ (SBQI2-σʔλΛऔͬͯ͘ΔͨΊͷΫΤϦݴޠ ‣ ରαʔό͚ͩͰͳ͍ ‣ -PDBMͷσʔλͷߋ৽Λී௨ͷRVFSZNVUBUJPOͷΑ͏ʹߦ͑Δ
‣ 3FEVYͰ͍͏TUPSF͕BQPMMPͷDBDIF
©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(), });
©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
©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
©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Λ͏ͱ͖
©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Λ͏ͱ͖
©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Λ͏ͱ͖
©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Λ͏ͱ͖
©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>
©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ʹରͯ͠ΫΤϦΛ͛Δ
©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ʹରͯ͠ΫΤϦΛ͛Δ
©2018 Wantedly, Inc. EFGBVMUT BQPMMPMJOLTUBUF ‣ DBDIFͷॳظ ‣ SFEVYͩͱJOJUJBMTUBUF export
const defaults = { visibilityFilter: 'SHOW_ALL', todos: [], };
©2018 Wantedly, Inc. SFTPMWFST BQPMMPMJOLTUBUF ‣ "QPMMP4FSWFSͰɺ2VFSZ.VUBUJPOʹରԠ͢Δɺ ࣮ࡍʹσʔλΛऔಘ͢Δؔ ‣ BQPMMPMJOLTUBUFͰɺDBDIF͔ΒͷऔಘɾDBDIFʹର͢Δૢ࡞ͳͲ
ͷॲཧ͕هड़͞ΕΔͱ͜Ζ
©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; }, } }
©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
©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
©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
©2018 Wantedly, Inc. ·ͱΊ ‣ (SBQI2-MPDBMʹͳΔσʔλʹରͯ͛͠ΕΔ ‣ "QPMMP͚ͩͰ4BUFཧͰ͖Δ ‣ SFEVYͷϘΠϥʔϓϨʔτΛॻ͔ͳ͍͍͔ͯ͘ΒεοΩϦ͢Δ