介紹

在ApolloData & Mutation (三) 提到的 options.update 來寫mutation後要同步 cache ，但是通常去改這個 cache 是一件很阿雜的工作,這次介紹 options.refetchQueries來簡化流程

實際使用的時候非常的簡單，以下觸發 refetchQueries 的時機點，讓Cache 透過網路得到最新正確的資料

第一種直接綁Hoc有異動的時候

export default graphql(gql`mutation { ... }`, {
  options: {
    refetchQueries: [
      'CommentList',
      'PostList',
    ],
  },
})(MyComponent);

第二種 使用 variables 去異動時候觸發

import { COMMENT_LIST_QUERY } from '../components/CommentList';

export default graphql(gql`mutation { ... }`, {
  options: (props) => ({
    refetchQueries: [
      {
        query: COMMENT_LIST_QUERY,
      },
      {
        query: gql`
          query ($id: ID!) {
            post(id: $id) {
              commentCount
            }
          }
        `,
        variables: {
          id: props.postID,
        },
      },
    ],
  }),
})(MyComponent);

最後 mutation 還有一個 options.updateQueries 的method， 但是官方說明這個 method 在下一個版本會移除這邊就不多介紹了，官方建議直接使用 options.update method

總結

因為如果寫 options.update 會寫滿多對cache的工作，如果要一次同步又不要寫這麼多，就如果上方程式，有發生異動時候透過 refetchQueries 可以指定多個query同步更新， CommentList 與 PostList 的 Query 從網路拉一次，這樣整包 cache節點就全部同步更新了