介紹

在Mutation 的部分 ，config Apollo 提供了許多不錯的函式庫， 大體使用跟 Query 很相似，以下來介紹 config 有哪些可以 method 可以使用

跟 query 一樣 第一個參數使用 gql 配置如何 mutation 。第二個參數裡面可以放options 如下方所示位置

export default graphql(gql`mutation { ... }`, {
  options: {
    // 這裡
  },
})(MyComponent);

可以直接用使用 props 定義method，這部分也都跟 Query 一樣。

export default graphql(gql`mutation { ... }`, {
  options: (props) => ({
    // 這裡可以自定義props 包含 method 
  }),
})(MyComponent);

當然如果要直接在元件使用mutate 只要把 mutate 拿出來用就可以了

function MyComponent({ mutate }) {
  return (
    <button onClick={() => {
      mutate({
        // 直接在元件裡下 mutate
      });
    }}>
      Mutate
    </button>
  )
}

export default graphql(gql`mutation { ... }`)(MyComponent);

options.variables:使用 variables 接收 props 觸發 mutation 這部分也跟 Query 一樣

export default graphql(gql`
  mutation ($foo: String!, $bar: String!) {
    ...
  }
`, {
  options: (props) => ({
    variables: {
      foo: props.foo,
      bar: props.bar,
    },
  }),
})(MyComponent);

options.optimisticResponse 樂觀反應是為了增加使用者體驗，一般會發Request到後端去撈完資料在回寫道程式碼中，但是這樣的等待時間會降低UX體驗，所以樂觀回應也有人稱會樂觀ＵＩ， 當下先給預期反應，等到Server response 後Update正確的資料

function MyComponent({ newText, mutate }) {
  return (
    <button onClick={() => {
      mutate({
        variables: {
          text: newText,
        },
        // 下方先指定樂觀UI反應狀況
        optimisticResponse: {
          createTodo: {
            id: -1, // 一個暫時的ID，實際會以Server返回的為主
            text: newText,
            completed: false,
          },
        },
      });
    }}>
      Add Todo
    </button>
  );
}

export default graphql(gql`
  mutation ($text: String!) {
    createTodo(text: $text) {
      id
      text
      completed
    }
  }
`)(MyComponent);

總結

mutation 跟 Query Options 語法幾乎是一樣 ， 比較不同的是 optimisticResponse (給一個預期暫時的值來增加使用者的體驗).後面章節再介紹其他差異性