在Vue中使用Apollo处理GraphQL mutation有没有更简便的实现方式？

1. 优先使用GraphQL Input类型简化参数 #

要求后端预先定义好实体的输入类型，避免每次mutation都逐个声明变量：

后端schema示例：

input ContactInput {
  firstName: String!
  lastName: String!
  email: String!
}

type Mutation {
  createContact(input: ContactInput!): Contact
}

前端对应的mutation可以直接简化为：

// 预先抽离到单独的graphql/contact.js文件统一管理
import { gql } from '@apollo/client/core'
export const CREATE_CONTACT = gql`
  mutation CreateContact($input: ContactInput!) {
    createContact(input: $input) {
      id
      firstName
      lastName
      email
    }
  }
`
组件里调用的时候直接传整个contactData作为input参数即可：
```js
import { CREATE_CONTACT } from '@/graphql/contact'
// ...
methods: {
  createContact() {
    this.$apollo.mutate({
      mutation: CREATE_CONTACT,
      variables: {
        input: this.contactData
      }
    })
  }
}

2. 用Fragment复用返回字段 #

如果多个查询/mutation都需要返回相同的实体字段，可以定义片段统一复用，避免重复写返回字段：

// graphql/fragments.js
export const CONTACT_FRAGMENT = gql`
  fragment ContactFields on Contact {
    id
    firstName
    lastName
    email
  }
`

之后所有用到contact返回字段的地方直接引用片段即可：

export const CREATE_CONTACT = gql`
  ${CONTACT_FRAGMENT}
  mutation CreateContact($input: ContactInput!) {
    createContact(input: $input) {
      ...ContactFields
    }
  }
`
## 3. 封装通用CRUD逻辑
如果是Vue3项目配合@vue/apollo-composable，可以把常用的操作封装成组合式函数，全局复用：
```js
// composables/useContact.js
import { useMutation } from '@vue/apollo-composable'
import { CREATE_CONTACT } from '@/graphql/contact'

export function useCreateContact() {
  const { mutate: createContact, loading, error } = useMutation(CREATE_CONTACT)
  return {
    createContact: (contactData) => createContact({ input: contactData }),
    loading,
    error
  }
}

组件里直接调用即可，不需要重复写任何gql相关逻辑：

import { useCreateContact } from '@/composables/useContact'

// setup 中
const { createContact, loading } = useCreateContact()
// 调用的时候直接传form数据
const submit = () => createContact(contactData.value)

进阶优化 #

如果项目复杂度较高，可以接入GraphQL代码生成工具，工具会自动根据后端schema生成所有预定义的query、mutation、类型声明，不需要手写任何gql模板代码，进一步减少冗余工作。

内容的提问来源于stack exchange，提问作者zachary egle