iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 15
0

介紹

Apollo 中有個 Cache機制 ,在 Query options.fetchPolicy 有說明過有四種模式可以選擇, cache-first,cache-and-network,network-only,cache-only,如果是用到跟 Cache 有關的時候,這時候 Mutation 即有異動的時候就要使用 options.update 來同步更新 Cache

options.update
如果有 mutate 就要更新cache store,不然會造成不同步現象。 默認Apollo Client 會自動更新 Store 中的所有重疊節點。通常會以dataIdFromObject ID 都將使用結果新的字段進行 Update。這樣是不夠的,如果有時想要取決於當前 Cache 中的數據的方式來 Updata Cache。這時候就可以透過 options.update 來設定。

options.update 有兩個參數。 第一個是一個 DataProxy ,提供一些方法可以讓store與Data進行交互。第二個是來自你的mutate 動作 - 無論是樂觀UI還是Server返回資料。

const query = gql`{ todos { ... } }`

export default graphql(gql`
  mutation ($text: String!) {
    createTodo(text: $text) { ... }
  }
`, {
  options: {
    update: (proxy, { data: { createTodo } }) => {
      const data = proxy.readQuery({ query });
      data.todos.push(createTodo);
      proxy.writeQuery({ query, data });
    },
  },
})(MyComponent);

可以看到 DataProxy 就是抓取 store 的資料,這邊除了data.todos.push(createTodo)實際發request動作之外要記得使用writeQuery 去更新 store

總結

在使用 Apollo 只要遇到 Mutation Cache 就會容易有誤差,所以要透過 update 裡面的 proxy 去保持 cache 同步,或是某些時機需要手動去更新等等就會用到 update,不過使用 update 要寫比較多code 下一章節介紹一個可以直接與網路同步的 refetchQueries


上一篇
ApolloData & Mutation (二)
下一篇
ApolloData & Mutation (四)
系列文
GraphQL + ApolloData 入門30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言