介紹
ApolloData Client 在可以 Query 資料之外，還可以使用GraphQL Mutation。在GraphQL中，Mutation與Query 的語法中是相同的，在gql的 payload query 唯一的區別是使用關鍵字 mutation 而不是 query(預設 query可以不用寫) 。 另外還有一些設定例如update cache的部分不太一樣。

gql 內容與 query 相同只是多了 mutation

mutation {
  submitRepository(repoFullName: "apollographql/apollo-client") {
    id
    repoName
  }
}

基本的 mutation 會使用到的 lib 也都跟 query 一樣

mport React, { Component } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';

class NewEntry extends Component { ... }

const submitRepository = gql`
  mutation submitRepository {
    submitRepository(repoFullName: "apollographql/apollo-client") {
      createdAt
    }
  }
`;

const NewEntryWithData = graphql(submitRepository)(NewEntry);

最長見最簡單 mutation 使用，可以使用ApolloData 提供的 props.mutate method 直接定義好gql 看需要哪些參數如下就可以發一個 mutation的 payload到Server 端了。

省略...
class NewEntry extends Component {
  onClick() {
    this.props.mutate({
      variables: { repoFullName: 'apollographql/apollo-client' }
    })
      .then(({ data }) => {
        console.log('got data', data);
      }).catch((error) => {
        console.log('there was an error sending the query', error);
      });
  }
省略...

Apollo 可以直接在元件的方法來來進行 fetch，但通常都會封裝在一個 method 底下，在使用 HOC 的時候就可以透過graphql 第二個參數 物件中的 props 使用 apollo 提供的 mutate 去包裝起來 ，下面程式碼的 submit 就是一個 props.submit 的 method ，設定後後在元件之中之需要傳入參數就可以了，如果沒有這邊定義好 Method 讓apollo代理， 直接 fetch 就要再寫 then 去接帶回傳的資料。

const submitRepository = gql`...`; // Same query as above

const NewEntryWithData = graphql(submitRepository, {
  props: ({ mutate }) => ({
    submit: (repoFullName) => mutate({ variables: { repoFullName } }),
  }),
})(NewEntry);

總結

ApolloData 提供 mutation 可以在元件中直接使用，也可以透過graphql 的第二個參數中的 props 綁一個function 元件使用 ，使用上跟query都差不多只是在寫 gql語法要多加一個mutation