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

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

Answer 2

If you want to wipe up __typename from GraphQL response (from the root and its children), you can use graphql-anywhere package.

Something like: const wipedData = filter(inputFragment, rcvData);

• inputFragment is a fragment defines the fields (You can see details here)
• rcvData is the received data from GraphQL query

By using the filter function, the wipedData includes only required fields you need to pass as mutation input.

Answer 3

Here's what I did, to support file uploads as well. It's a merge of multiple suggestions I found on the Github thread here: Feature idea: Automatically remove __typename from mutations

import { parse, stringify } from 'flatted';

const cleanTypename = new ApolloLink((operation, forward) => {
    const omitTypename = (key, value) => (key === '__typename' ? undefined : value);

    if ((operation.variables && !operation.getContext().hasUpload)) {
        operation.variables = parse(stringify(operation.variables), omitTypename);
    }

    return forward(operation);
});

Hooking up the rest of my client.tsx file, simplified:

import { InMemoryCache } from 'apollo-cache-inmemory';
import { createUploadLink } from 'apollo-upload-client';
import { ApolloClient } from 'apollo-client';
import { setContext } from 'apollo-link-context';
import { ApolloLink } from 'apollo-link';

const authLink = setContext((_, { headers }) => {
    const token = localStorage.getItem(AUTH_TOKEN);
    return {
        headers: {
        ...headers,
        authorization: token ? `Bearer ${ token }` : '',
        },
    };
});



const httpLink = ApolloLink.from([
    cleanTypename,
    authLink.concat(upLoadLink),
]);

const client = new ApolloClient({
    link: httpLink,
    cache,
});

export default client;

Now when I call mutations that are of type upload, I simply set the context hasUpload to true, as shown here:

UpdateStation({variables: { input: station }, context: {hasUpload: true }}).then()

Answer 4

For those looking for a TypeScript solution:

import cloneDeepWith from "lodash/cloneDeepWith";

export const omitTypenameDeep = (
  variables: Record<string, unknown>
): Record<string, unknown> =>
  cloneDeepWith(variables, (value) => {
    if (value && value.__typename) {
      const { __typename, ...valWithoutTypename } = value;
      return valWithoutTypename;
    }

    return undefined;
  });

const removeTypename = new ApolloLink((operation, forward) => {
  const newOperation = operation;
  newOperation.variables = omitTypenameDeep(newOperation.variables);
  return forward(newOperation);
});

// ...

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: ApolloLink.from([removeTypename, httpLink]),
});

Answer 5

Below approach worked for me so far in my use case.

const {
        loading,
        error,
        data,
      } = useQuery(gqlRead, {
        variables: { id },
        fetchPolicy: 'network-only',
        onCompleted: (data) => {
          const { someNestedData } = data;
          const filteredData = removeTypeNameFromGQLResult(someNestedData);
          //Do sth with filteredData
        },
      });
    
    //in helper
    export const removeTypeNameFromGQLResult = (result: Record<string, any>) => {
      return JSON.parse(
        JSON.stringify(result, (key, value) => {
          if (key === '__typename') return;
          return value;
        })
      );
    };

Answer 6

I've just published graphql-filter-fragment to help with this use case. I've wrote in a bit more detail about the CRUD use case I had that led me to this approach.

Example:

import {filterGraphQlFragment} from 'graphql-filter-fragment';
import {gql} from '@apollo/client/core';

const result = filterGraphQlFragment(
  gql`
    fragment museum on Museum {
      name
      address {
        city
      }
    }
  `,
  {
    __typename: 'Museum',
    name: 'Museum of Popular Culture',
    address: {
      __typename: 'MuseumAddress',
      street: '325 5th Ave N',
      city: 'Seattle'
    }
  }
);

expect(result).toEqual({
  name: 'Museum of Popular Culture',
  address: {
    city: 'Seattle'
  }
});

Answer 7

Here is my solution. Vanilla JS, recursive, and does not mutate the original object:

const removeAllTypenamesNoMutate = (item) => {
  if (!item) return;

  const recurse = (source, obj) => {
    if (!source) return;

    if (Array.isArray(source)) {
      for (let i = 0; i < source.length; i++) {
        const item = source[i];
        if (item !== undefined && item !== null) {
          source[i] = recurse(item, item);
        }
      }
      return obj;
    } else if (typeof source === 'object') {
      for (const key in source) {
        if (key === '__typename') continue;
        const property = source[key];
        if (Array.isArray(property)) {
          obj[key] = recurse(property, property);
        } else if (!!property && typeof property === 'object') {
          const { __typename, ...rest } = property;
          obj[key] = recurse(rest, rest);
        } else {
          obj[key] = property;
        }
      }
      const { __typename, ...rest } = obj;

      return rest;
    } else {
      return obj;
    }
  };

   return recurse(JSON.parse(JSON.stringify(item)), {});
};