React同文件使用GraphQL Query与Mutation时data变量冲突解决

核心原因 #

useQuery和useMutation返回的响应字段（loading/error/data）命名完全一致，在同一组件作用域内直接解构会产生重复声明报错。自行修改变量名后代码不运行，通常是没有遵循ES对象解构的重命名语法，或是代码本身存在其他语法错误。

正确重命名方式 #

ES对象解构原生支持属性重命名，语法为原属性名: 自定义变量名，解构后直接使用自定义变量名即可，不会破坏Apollo钩子的响应式能力，这也是官方推荐的多钩子同域用法：

// 查询相关返回值统一加业务前缀区分
const { 
  loading: optionsLoading, 
  error: optionsError, 
  data: optionsData 
} = useQuery(QUERIES);

// 变更相关返回值按操作语义命名，触发函数也同步按业务命名
const [submitTeacherInfo, { 
  loading: submitLoading, 
  error: submitError, 
  data: submitResult 
}] = useMutation(MUTATIONS);

后续逻辑中对应使用重命名后的变量即可：比如判断下拉选项加载状态用optionsLoading，判断表单提交加载状态用submitLoading，不会产生冲突。

现有代码其他问题修复 #

你贴的原始代码存在两个会导致运行失败的问题，需要同步修正：

• Mutation直接通过模板字符串插值传参是错误用法，存在注入风险，还会导致GraphQL类型校验、缓存更新失效，必须通过官方规定的variables参数传值，不要把动态参数直接拼在gql模板字符串里。
• 原始代码中phone: "${number}行缺少闭合引号，本身存在语法错误。

修正后的完整Mutation写法参考：

const CREATE_TEACHER = gql`
mutation CreateTeacher(
  $first_name: String!
  $last_name: String!
  $phone: String!
  $email: String!
  $subjectRef: [ID!]!
  $gradeRef: [ID!]!
  $schoolRef: ID!
) {
  createTeacher(
    first_name: $first_name
    last_name: $last_name
    phone: $phone
    email: $email
    subjectRef: $subjectRef
    gradeRef: $gradeRef
    schoolRef: $schoolRef
  ) {
    id
    first_name
    last_name
    phone
    email
    email_verified
    approved
    number_verified
  }
}
`;

// 钩子调用
const [submitTeacherInfo, { loading: submitLoading, error: submitError, data: submitResult }] = useMutation(CREATE_TEACHER);

// 业务触发时传参
const handleFormSubmit = () => {
  submitTeacherInfo({
    variables: {
      first_name: firstName,
      last_name: lastName,
      phone: number,
      email: email,
      subjectRef: ["6287323efe0b204eee241cc5"],
      gradeRef: ["62872b8b0023e0dcc9c5a703"],
      schoolRef: "62ab59edde044d104f10e5a9"
    }
  })
}

内容的提问来源于stack exchange，提问作者Kiran S youtube channel