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