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

问题描述

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

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

  type元素{
 content：[ElementContent] 
 elementId：String 
 name：String 
 notes：String 
 type：String 
 createdAt：String 
 updatedAt：String 
} 
  

使用特殊类型 ElementContent ，这个很小，如下所示：

  type ElementContent { 
 content：String 
 locale：String 
} 
  

现在，当我在客户端查询时，顶级对象和低级对象都有其他属性（如果我试图按原样克隆正文，则会干扰更新对象）;

值得注意的是，GraphQL似乎在父对象中提供了 __ typename 属性，在子对象中，它们具有typename和符号（id） prop也是如此。

我爱将此对象复制到状态，更新状态，然后克隆状态并将其发送到我的更新变异。但是，由于GraphQL本身提供的未知属性，我遇到了障碍。

我尝试过：

删除元素.__ typename 效果很好，但是我还需要遍历子节点（一个动态的对象数组），并且可能还必须删除这些属性。 / p>

我不确定在这个等式中我是否遗漏了某些东西，或者我应该努力通过代码并循环+删除（我收到错误试图做一个forEach最初循环）。对于我正在尝试做的事情，是否有更好的策略？或者我是在正确的道路上，只需要一些好的循环代码来清理不需要的属性？

解决方案

有三种方法可以做这个

第一种方式

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

  apollo.create（{link：http，cache ：new InMemoryCache（{addTypename：false}）}）;  

第二种方式

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

  const cleanTypeName = new ApolloLink（（操作， forward）=> {
 if（operation.variables）{
 
 operation.variab les = omitDeep（operation.variables，'__ typename'）
} 
返回前进（操作）.map（（data）=> {
返回数据; 
}）; 
}）; 
  

第三种方式

创建自定义中间件并注入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）; 
} 
返回前进（操作）.map（（data）=> {
返回数据; 
 }）; 
}）; 
  

并注入中间件

  const httpLinkWithErrorHandling = ApolloLink.from（[
 cleanTypeName，
 retry，
 error，
 http，
]）; 
  

首选方法第三种方式因为它没有任何第三个pary依赖项没有缓存性能问题

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
  }

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);

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.

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.

I've tried doing:

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.

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?

解决方案

There are three ways of doing this

First way

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

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

Second Way

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;
  });
});

Third Way

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;
  });
});

and inject the middleware

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

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

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