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

Local State Management with Apollo

Local State Management with Apollo

8ad58ff2bfccf7b4c07b34000c1d6afd?s=128

Kodai Nakamura

August 23, 2018
Tweet

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