Cleaning Unwanted Fields From GraphQL Responses

Question

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?

Answer 1

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