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

Question

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

当突变变量包含___typename 属性(显然在 graphQl 架构中不存在)时，这会产生一个错误 500。

要修复可以在 graphQl 客户端配置中设置 addTypename: false 的问题:

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

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

但是出现了一个新错误:您在查询中使用了片段，但是您没有在 Apollo Client 中设置 addTypename: true 选项，或者您正在尝试将片段写入商店而不__类型名。写分片时请开启addTypename选项并包含__typename，以便Apollo Client准确匹配分片。

那么应该如何配置 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;
};

但感觉很糟糕。是否有内置的 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
})