Tweet
Tweet

Slide 1

Slide 1 text

©2018 Wantedly, Inc. Apollo Client Cache meguro.es 2019.10.10 - Naoki Kobayashi

Slide 2

Slide 2 text

©2018 Wantedly, Inc. Naoki Kobayashi GitHub: @kobayang Twitter: @kbys_02 I’m an Frontend Engineer @Wantedly

Slide 3

Slide 3 text

©2018 Wantedly, Inc. https://blog.apollographql.com/introducing-the-apollo-graphql-platform-8ef34bb269e5 cache

Slide 4

Slide 4 text

©2018 Wantedly, Inc. { Declare GraphQL Query Use Query to fetch data const TodoContainer = () => { const { data, loading, error } = useQuery(todosQuery); const todos = data ? data.todos : []; } const todosQuery = gql` query TodosQuery { todos { id title } } `;

Slide 5

Slide 5 text

©2018 Wantedly, Inc. Agenda • Apollo Client ͷ Cache ͸͍ͭߦΘΕΔ͔ • ͲͷΑ͏ʹCacheͷߋ৽Λߦ͏͔ • ͲΜͳσʔλ͕Cacheʹೖ͍ͬͯΔ͔ • Cacheͷߋ৽ͷ࠷దԽ

Slide 6

Slide 6 text

©2018 Wantedly, Inc. Fetch Data Flow User Interface Fetch Cache 3FRVFTUUP UIFTFSWFS .PVOUPSVTFSBDUJPO USJHHFSTGFUDI Apollo Server 3FBEDBDIF

Slide 7

Slide 7 text

©2018 Wantedly, Inc. Prefetching Data https://www.apollographql.com/docs/react/performance/performance/ onMouseOver Ͱ query ΛಡࠐΉ LinkઌͰ͸ಉ͡ΫΤϦΛಡࠐΉͱ Cache͕ώοτ͢ΔͨΊɺ Loadingͳ͠ͰData͕࢖͑Δ

Slide 8

Slide 8 text

©2018 Wantedly, Inc. Local State Management https://www.apollographql.com/docs/react/performance/performance/ • CacheΛར༻ͯ͠LocalͷStateΛѻ͑Δ • @client directive Λ Query/Mutation ʹ
 ͚ͭΔ͜ͱͰऔಘઌ͕ϩʔΧϧʹͳΔ # local-schema.grpahql extend type Todo { done: Boolean! } // apollo.ts const resolvers: Resolvers = { Todo: { done(todo: TodoFragment) { return todo.done || false; }, }, }; const todoFragment = gql` fragment TodoFragment on Todo { id title done @client } `;

Slide 9

Slide 9 text

©2018 Wantedly, Inc. InMemoryCache https://medium.com/expedia-group-tech/creating-your-own-apollo-cache-for-perf-and-profit-8f786849e5f6 • ApolloClientͷΩϟογϡͷσϑΥϧτ࣮૷ • Ωϟογϡ͢ΔࡍʹσʔλΛਖ਼نԽ͢Δ(Normalize)

Slide 10

Slide 10 text

©2018 Wantedly, Inc. Mutation Data Flow User Interface Mutation Apollo Server Cache 3FRVFTUUPUIFTFSWFS VTFSBDUJPO USJHHFSTNVUBUJPO 4UPSFDIBOHFT ESJWFT6*

Slide 11

Slide 11 text

©2018 Wantedly, Inc. Mutation Data Flow User Interface Mutation Apollo Server Cache 3FRVFTUUPUIFTFSWFS VTFSBDUJPO USJHHFSTNVUBUJPO 4UPSFDIBOHFT ESJWFT6* ࣮૷͢Δඞཁ͕͋Δ

Slide 12

Slide 12 text

©2018 Wantedly, Inc. ྫ: Todoͷ௥Ճ BEE5PEP.VUBUJPO UPEPT2VFSZ const todosQuery = gql` query TodosQuery { todos { id title } } `;

Slide 13

Slide 13 text

©2018 Wantedly, Inc. ྫ: refetchQueries const addTodoMutation = gql` mutation AddTodoMutation($title: String!) { addTodo(title: $title) { id title } } `; const [addTodo] = useMutation(addTodoMutation, { refetchQueries: [{ query: todosQuery }], }); Cache 3FGFUDI 4FSWFS3FTQPOTF

Slide 14

Slide 14 text

©2018 Wantedly, Inc. ྫ: update const [addTodo] = useMutation(addTodoMutation, { update: (cache, { data }) => { const cachedQuery = cache.readQuery({ query: todosQuery }); if (!cachedQuery || !data) { throw new Error(); } const todos = cachedQuery.todos; cache.writeQuery({ query: todosQuery, data: { todos: todos.concat([data.addTodo]) }, }); }, }); 4FSWFS3FTQPOTF Cache

Slide 15

Slide 15 text

©2018 Wantedly, Inc. ΩϟογϡΛ೷͍ͯΈΔ Apollo Client Developer Tools: Ωϟογϡͷத਎Λ֬ೝͰ͖Δ

Slide 16

Slide 16 text

©2018 Wantedly, Inc. dataIdFromObject https://github.com/apollographql/apollo-client/blob/22a450aace/packages/apollo-cache-inmemory/src/inMemoryCache.ts

Slide 17

Slide 17 text

©2018 Wantedly, Inc. readFragment const data = client.readFragment({ id: "Todo:1", fragment: todoFragment, }); console.log(data); // => { id: 1, title: "ൃදࢿྉΛ࡞Δ", __typename: "Todo" }

Slide 18

Slide 18 text

©2018 Wantedly, Inc. id͕ͳ͍৔߹ • ROOT_QUERY.todos.0 ͷΑ͏ʹ 
 ROOT_QUERY ʹඥ͍ͮͯΩϟογϡ͞ΕΔ const todosQuery = gql` query TodosQuery { todos { title } } `;

Slide 19

Slide 19 text

©2018 Wantedly, Inc. id͕ͳ͍৔߹ • ࣮͸readFragmentͰऔಘͰ͖Δ const data = client.readFragment({ id: “ROOT_QUERY.todos.0”, fragment: todoFragment, }); console.log(data); // => { title: "ൃදࢿྉΛ࡞Δ", __typename: "Todo" }

Slide 20

Slide 20 text

©2018 Wantedly, Inc. Mutation Data Flowʢ࠶ܝʣ User Interface Mutation Apollo Server Cache 3FRVFTUUPUIFTFSWFS VTFSBDUJPO USJHHFSTNVUBUJPO 4UPSFDIBOHFT ESJWFT6*

Slide 21

Slide 21 text

©2018 Wantedly, Inc. Optimistic Response Mutation Apollo Server Cache User Interface Optimistic Response

Slide 22

Slide 22 text

©2018 Wantedly, Inc. Optimistic Response Mutation ͷҾ਺ʹ௥Ճ optimisticResponse: vars => ({ addTodo: { id: "-1", title: vars.title, __typename: "Todo", }, }), update: (cache, { data }) => { console.log("update", data); //… } update͸mutation࣮ߦ࣌ͱߋ৽࣌ʹ 2ճݺ͹ΕΔ

Slide 23

Slide 23 text

©2018 Wantedly, Inc. Optimistic Response ApolloCache removeOptimistic Ͱ optimisticResponseͷΩϟογϡ͸࡟আ͞ΕΔ https://github.com/apollographql/apollo-client/blob/22a450aace/packages/apollo-cache-inmemory/src/inMemoryCache.ts#L251

Slide 24

Slide 24 text

©2018 Wantedly, Inc. ·ͱΊ • Apollo Clientʹ͸Ωϟογϡͷ࢓૊Έ͕͋Γ
 Fetchͨ͠σʔλΛਖ਼نԽͯ͠Ωϟογϡ͍ͯ͠Δ
 • Mutation࣌͸ɺঢ়گʹ߹Θͤͯ refetchQueries, update, optimisticResponse Λ࣮૷ͯ͠ΩϟογϡΛߋ৽ͤ͞Δඞཁ͕͋Δ
 • ΩϟογϡΛҙࣝ͢Δ͜ͱͰύϑΥʔϚϯεΛ޲্ͤ͞Δ͜ͱ͕Ͱ͖Δ