基于useQuery查询结果编写mutation的类型转换问题

你遇到的报错本质和TypeScript类型转换无关，类型断言仅作用于编译阶段做类型提示，不会修改运行时的实际对象内容。你通过useQuery返回的customer对象默认携带了GraphQL自动注入的__typename元字段，以及id、created_at等未在UpdateCustomerInput接口中定义的字段，直接提交会触发GraphQL服务端的字段校验报错。

方案1：手动构造提交字段（最推荐） #

直接按需提取UpdateCustomerInput要求的字段提交，可控性最高，也能避免多余字段提交：

const { mutate: updateCustomer } = useMutation(
  MUTATION_CUSTOMER_UPDATE,
  () => ({
    variables: {
      id: id,
      // 只罗列需要提交的字段即可
      input: {
        name: customer.value.name,
        phone: customer.value.phone,
        email: customer.value.email,
        // 其他符合UpdateCustomerInput定义的字段
      }
    },
  })
);

方案2：解构过滤多余字段 #

如果提交的字段较多时，可以通过解构快速过滤掉不需要的字段：

// 定义转换函数
const formatToInput = (raw: Customer): UpdateCustomerInput => {
  // 解构过滤掉不需要的字段，剩余字段即为提交参数
  const { __typename, id, created_at, ...inputFields } = raw;
  return inputFields as UpdateCustomerInput;
}

// mutation中直接调用
const { mutate: updateCustomer } = useMutation(
  MUTATION_CUSTOMER_UPDATE,
  () => ({
    variables: {
      id: id,
      input: formatToInput(customer.value)
    },
  })
);

额外提示 #

你之前代码中的new Object(...)写法完全没有作用，不会帮你过滤多余字段，仅会返回原对象的引用，可以直接删除。
如果需要全局移除所有query返回结果自动去掉__typename字段，可以配置Apollo Client的链路中间件统一处理，但id、created_at这类业务字段还是需要单独过滤处理。

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