如何修复 graphql 突变类型名错误

Question

我尝试使用apollo graphQl client 进行 GraphQl 突变。

当变异变量包含___typename 属性时，这会生成error 500（这显然不存在于 graphQl 架构中）。

要解决可以在 graphQl 客户端配置中设置 addTypename: false 的问题：

const graphqlClient = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache({
    addTypename: false
  })
})

现在突变几乎起作用了……

但是有一个新的错误：You're using fragments in your queries, but either don't have the addTypename: true option set in Apollo Client, or you are trying to write a fragment to the store without the __typename. Please turn on the addTypename option and include __typename when writing fragments so that Apollo Client can accurately match fragments.

那么应该如何配置 graphQl 客户端来处理突变呢？

现在我使用here找到的清理功能：

const removeTypename = (value) => {
  if (value === null || value === undefined) {
    return value;
  } else if (Array.isArray(value)) {
    return value.map(v => removeTypename(v));
  } else if (typeof value === 'object') {
    const newObj = {};
    Object.keys(value).forEach(key => {
      if (key !== '__typename') {
        newObj[key] = removeTypename(value[key]);
      }
    });
    return newObj;
  }
  return value;
};

但感觉很hacky。有没有内置的graphql客户端？

Answer 1

因此，感谢@Daniel Rearden 的想法和this 的评论，我使用自定义的 apollo 链接从突变变量中去除类型名：

const omitTypename = (key, value) => {
  return key === '__typename' ? undefined : value
}

const omitTypenameLink = new ApolloLink((operation, forward) => {
  if (operation.variables) {
    operation.variables = JSON.parse(
      JSON.stringify(operation.variables),
      omitTypename
    )
  }
  return forward(operation)
})

然后将它与其他链接一起使用，如下所示：

const link = ApolloLink.from([authLink, omitTypenameLink, httpLink])
const cache = new InMemoryCache()

const graphqlClient = new ApolloClient({
  link,
  cache
})

Answer 2

获取某个查询的值，然后将其作为变量插入突变是一种非典型场景，因此对于您要尝试做的事情并不容易解决。虽然您可以将客户端实例配置为从结果中省略 __typename 字段，但将对象的 __typename（连同其 id 或 _id）用作缓存键 - 省略它会导致一些意外如果它没有彻底破坏事物的行为。

到目前为止，最好的方法是在将查询结果作为变量传递之前对其进行操作。我认为这样的事情应该可以解决问题：

function stripTypenames (value) {
    if (Array.isArray(value)) {
        return value.map(stripTypenames)
    } else if (value !== null && typeof(value) === "object") {
      const newObject = {}
      for (const property in value) {
          if (property !== '__typename') {
            newObject[property] = stripTypenames(value[property])
          }
      }
      return newObject
    } else {
      return value
    }
}

附带说明，除非您使用的是客户端数据（即apollo-link-state），否则很难想象您将从服务器获取一些数据然后必须将相同的数据输入突变的情况。如果数据已经存在于服务器上，则为它传入一个 id 并在服务器端检索它就足够了。如果您不得不跳过这些障碍，这可能表明 API 本身需要更改。