Local State Management with Apollo

Transcript

1. ©2018 Wantedly, Inc. -PDBM
   4UBUF
   .BOBHFNFOU
 XJUI
   "QPMMP Roppongi.js #5 23th.Aug.2018 - Kodai Nakamura
2. ©2018 Wantedly, Inc. -PDBM
   4UBUF
   .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͕ͭʹͳΔ
    z4JOHMF
   TPVSDF
   PG
   USVUIz
   ‣ 4UBUFಉ࢜ͷ੔߹ΛऔΔͷ͕໘౗
   ‣ σʔλͷߋ৽ํ๏͕ҧ͏
    BDUJPO
   Λ
   EJTQBUDI
   ͯ͠
   SFEVDFS
   ͕
   TUBUF
   Λߋ৽
    RVFSZ
   
   NVUBUJPO େมͦ͏ͳͱ͜Ζ
8. ©2018 Wantedly, Inc. BQPMMPMJOLTUBUF ‣ (SBQI2-
   ͸
   σʔλΛऔͬͯ͘ΔͨΊͷΫΤϦݴޠ
   ‣ ର৅͸αʔό͚ͩͰ͸ͳ͍
   ‣ -PDBM
   ͷσʔλͷߋ৽Λ
   ී௨ͷ
   RVFSZ
   
   NVUBUJPO
   ͷΑ͏ʹߦ͑Δ
   ‣ 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
    ͩͱ
    JOJUJBM
    TUBUF export const defaults = { visibilityFilter: 'SHOW_ALL', todos: [], };
20. ©2018 Wantedly, Inc. SFTPMWFST BQPMMPMJOLTUBUF ‣ "QPMMP
    4FSWFS
    Ͱ͸ɺ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
    ͷϘΠϥʔϓϨʔτΛॻ͔ͳ͍͍͔ͯ͘ΒεοΩϦ͢Δ