Cleaning Unwanted Fields From GraphQL Responses

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

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.

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

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

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

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

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