Remove Typename Link

Overview

When reusing data from a query as an argument to another GraphQL operation, __typename fields can cause errors. To avoid this, you can use the removeTypenameFromVariables link to automatically remove __typename fields from variables in operations. You can import and instantiate it like so:

1
import { removeTypenameFromVariables } from '@apollo/client/link/remove-typename';
2

3
const removeTypenameLink = removeTypenameFromVariables();

Remove __typename from all variables

As an example, take the following query. Apollo Client automatically adds __typename fields for each field selection set.

1
const query = gql`
2
  query DashboardQuery($id: ID!) {
3
    dashboard(id: $id) {
4
      id
5
      name
6
    }
7
  }
8
`;
9

10
const { data } = await client.query({ query, variables: { id: 1 }});
11
// {
12
//   "dashboard": {
13
//     "__typename": "Dashboard",
14
//     "id": 1,
15
//     "name": "My Dashboard"
16
//   }
17
// }

Now let's update this dashboard by sending a mutation to our server. We'll use the dashboard returned from the previous query as input to our mutation.

1
const mutation = gql`
2
  mutation UpdateDashboardMutation($dashboard: DashboardInput!) {
3
    updateDashboard(dashboard: $dashboard) {
4
      id
5
      name
6
    }
7
  }
8
`;
9

10
await client.mutate({
11
  mutation,
12
  variables: {
13
    dashboard: { ...data.dashboard, name: 'My Updated Dashboard' }
14
  }
15
});

Without the use of the removeTypenameFromVariables link, the server will return an error because data.dashboard still contains the __typename field.

Keep __typename in JSON scalars

Sometimes, you may need to retain the __typename field from a query's response—for example, in the case of JSON scalar input fields.

While the GraphQL type validation spec disallows input fields that begin with two underscores (__), this restriction doesn't apply when the input field is a JSON scalar. (A JSON scalar type accepts raw JSON as input.) You can configure the removeTypenameFromVariables link to retain __typename for certain JSON scalars.

To do so, provide an except option when instantiating removeTypenameFromVariables and use the KEEP sentinel to denote which variables types should keep __typename. Each key in the except option should correspond to an input type in your GraphQL schema.

For example, suppose your schema includes a ConfigureDashboardMutation mutation that takes a JSON type variable named $dashboardConfig:

1
mutation ConfigureDashboardMutation($dashboardConfig: JSON) {
2
  configureDashboard(config: $dashboardConfig) {
3
    id
4
  }
5
}

You can tell the removeTypenameFromVariables link to keep all __typename fields for any variable declared as a JSON type. (Variable types are inferred from the GraphQL query.)

1
import { removeTypenameFromVariables, KEEP } from '@apollo/client/link/remove-typename';
2

3
const removeTypenameLink = removeTypenameFromVariables({
4
  except: {
5
    JSON: KEEP
6
  }
7
});

When the query moves through the removeTypenameFromVariables link, the dashboardConfig variable will be detected as a JSON scalar type and all __typename fields are kept intact.

Nested JSON scalar fields in input variables

Not all top-level variables may map to a JSON scalar type. For more complex input object types, the JSON scalar may be found on a nested field. The except option lets you configure nested fields within these types to keep __typename intact.

1
import { removeTypenameFromVariables, KEEP } from '@apollo/client/link/remove-typename';
2

3
const removeTypenameLink = removeTypenameFromVariables({
4
  except: {
5
    DashboardInput: {
6
      config: KEEP
7
    }
8
  }
9
});

Variables declared as type DashboardInput will have any top-level __typename fields removed, but keep __typename for the config field.

This nesting can be as deep as needed and include as many fields as necessary. Use the KEEP sentinel to determine where __typename should be kept.

1
import { removeTypenameFromVariables, KEEP } from '@apollo/client/link/remove-typename';
2

3
const removeTypenameLink = removeTypenameFromVariables({
4
  except: {
5
    // Keep __typename for `bar` and `baz` fields on any variable
6
    // declared as a `FooInput` type
7
    FooInput: {
8
      bar: KEEP,
9
      baz: KEEP,
10
    },
11

12
    // Keep __typename for the `baz.qux` field on any variable
13
    // declared as a `BarInput` type
14
    BarInput: {
15
      baz: {
16
        qux: KEEP
17
      }
18
    },
19

20
    // Keep __typename on `bar.baz` and `bar.qux.foo` fields for any
21
    // variable declared as a `BazInput` type
22
    BazInput: {
23
      bar: {
24
        baz: KEEP,
25
        qux: {
26
          foo: KEEP
27
        }
28
      }
29
    },
30
  }
31
});

To keep __typename for nested fields in arrays, use the same object notation as if the field were an object type.

1
import { removeTypenameFromVariables, KEEP } from '@apollo/client/link/remove-typename';
2

3
const removeTypenameLink = removeTypenameFromVariables({
4
  except: {
5
    // Keep __typename on the `config` field for each widget
6
    // in the `widgets` array for variables declared as
7
    // a `DashboardInput` type
8
    DashboardInput: {
9
      widgets: {
10
        config: KEEP
11
      }
12
    }
13
  }
14
});

Options