从 GraphQL 响应中清除不需要的字段 [英] Cleaning Unwanted Fields From GraphQL Responses

问题描述

我有一个 GraphQL 客户端请求的对象.

I have an object that my GraphQL client requests.

这是一个相当简单的对象:

It's a reasonably simple object:

type Element {
    content: [ElementContent]
    elementId: String
    name: String
    notes: String
    type: String
    createdAt: String
    updatedAt: String
  }

使用特殊类型 ElementContent，它很小，看起来像这样:

With the special type ElementContent, which is tiny and looks like this:

  type ElementContent {
    content: String
    locale: String
  }

现在，当我在客户端查询时，顶层对象和底层对象都有额外的属性(如果我试图按原样克隆主体，这些属性会干扰更新对象)；

Now, when I query this on the clientside, both the top level object and the lower level object has additional properties (which interfere with updating the object if I attempt to clone the body exactly-as-is);

值得注意的是，GraphQL 似乎在父对象中提供了一个 __typename 属性，而在子对象中，它们也有 typename 和一个 Symbol(id) 属性.

Notably, GraphQL seems to supply a __typename property in the parent object, and in the child objects, they have typename and a Symbol(id) property as well.

我想将这个对象复制到状态，更新状态，然后克隆状态并将它发送到我的 update 突变.但是，由于 GraphQL 本身提供的未知属性，我遇到了障碍.

I'd love to copy this object to state, update in state, then clone the state and ship it to my update mutation. However, I get roadblocked because of unknown properties that GraphQL itself supplies.

我尝试过:

delete element.__typename 效果很好，但是我还需要遍历子项(对象的动态数组)，并且可能还必须删除这些属性.

delete element.__typename to good effect, but then I also need to loop through the children (a dynamic array of objects), and likely have to remove those properties as well.

我不确定在这个等式中我是否遗漏了什么，或者我应该努力完成代码和循环 + 删除(我最初尝试执行 forEach 循环时收到错误).对于我正在尝试做的事情，是否有更好的策略?还是我在正确的道路上，只需要一些好的循环代码来清除不需要的属性?

I'm not sure if I'm missing something during this equation, or I should just struggle through the code and loop + delete (I received errors attempting to do a forEach loop initially). Is there a better strategy for what I'm attempting to do? Or am I on the right path and just need some good loop code to clean unwanted properties?

推荐答案

有3种方法

第一种方式

像这样更新客户端参数，它将省略graphql中不需要的字段.

Update the client parameter like this it will omit the unwanted fields in graphql.

apollo.create({
  link: http,
  cache: new InMemoryCache({
    addTypename: false
  })
});

第二种方式

通过使用 omit-deep 包并将其用作中间件

By using the omit-deep package and use it as a middleware

const cleanTypeName = new ApolloLink((operation, forward) => {
  if (operation.variables) {

    operation.variables = omitDeep(operation.variables,'__typename')
  }
  return forward(operation).map((data) => {
    return data;
  });
});

第三种方式

创建自定义中间件并注入 apollo

Creating a custom middleware and inject in the apollo

const cleanTypeName = new ApolloLink((operation, forward) => {
  if (operation.variables) {
    const omitTypename = (key, value) => (key === '__typename' ? undefined : value);
    operation.variables = JSON.parse(JSON.stringify(operation.variables), omitTypename);
  }
  return forward(operation).map((data) => {
    return data;
  });
});

并注入中间件

const httpLinkWithErrorHandling = ApolloLink.from([
  cleanTypeName,
  retry,
  error,
  http,
]);

如果您使用带有查询/突变的片段第二种方式 &推荐使用第三种方式.

If you use fragments with the queries/mutations Second Way & Third Way is recommended.

首选方法是第三种，因为它没有任何第三方依赖，也没有缓存性能问题

Preferred method is Third Way Because it does not have any third pary dependency and no cache performance issues

这篇关于从 GraphQL 响应中清除不需要的字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！