自从3.8.0

移除Typename Link

自动从变量中删除 __typename 字段。

概述

当将来自一个查询作为参数传递给另一个GraphQL操作时，__typename字段可能导致错误。为了避免这种情况，您可以使用removeTypenameFromVariables链接来自动从操作中的__typename字段中删除变量。

从所有变量中删除`__typename`

例如，考虑以下查询。 Apollo Client自动为每个字段__typename选择集添加字段。

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
// }

现在，让我们通过向我们的服务器发送一个突变来更新这个仪表板。我们将使用之前查询返回的dashboard作为传入突变的数据。

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

如果没有使用removeTypenameFromVariables链接，由于data.dashboard仍然包含__typename字段，服务器将返回错误。

用法

您可以如此导入和实例化它

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

3
const removeTypenameLink = removeTypenameFromVariables();

在您的链路链接之前引入终止链接的任何位置使用removeTypeNameLink来从所有操作中移除变量中的__typename字段。

1
import { from } from '@apollo/client';
2

3
const link = from([removeTypenameLink, httpLink]);
4

5
const client = new ApolloClient({
6
  link,
7
  // ... other options
8
});

如果您使用方向性组合，例如，将订阅发送到websocket连接，请将订阅放置在splitLink之前，以从所有操作中移除变量中的__typename。

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

4
const removeTypenameLink = removeTypenameFromVariables();
5

6
const splitLink = split(
7
  ({ query }) => {
8
    const definition = getMainDefinition(query);
9
    return (
10
      definition.kind === 'OperationDefinition' &&
11
      definition.operation === 'subscription'
12
    );
13
  },
14
  wsLink,
15
  httpLink,
16
);
17

18
const link = from([removeTypenameLink, splitLink]);
19

20
const client = new ApolloClient({
21
  link,
22
  // ... other options
23
});

在JSON标量中保留`__typename`

有时，您可能需要保留查询响应中的__typename字段，例如在JSON标量输入字段中的__typename。

尽管GraphQL 类型验证规范不允许使用两个下划线开头的输入字段__，但当输入字段是JSON 标量时，此限制不适用。

为此，在实例化removeTypenameFromVariables时提供except选项，并使用KEEP哨兵表示哪些变量类型应保留__typename。每个except选项中的键都应与您的GraphQL模式中的输入类型对应。

例如，假设您的模式包含一个ConfigureDashboardMutation 突变，它接受一个名为$dashboardConfig的JSON类型变量。

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

您可以让removeTypenameFromVariables链接保留任何声明为JSON类型的变量中的所有__typename字段。变量类型由GraphQL查询推断。

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

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

注意：JSON 标量类型不需要字面量命名为JSON才被认为是JSON 标量。

当查询通过removeTypenameFromVariables链接时，dashboardConfig 变量将被检测为JSON 标量类型，并且所有__typename字段都保持不变。

输入变量中的嵌套JSON标量字段

并非所有顶层变量都可能映射到JSON 标量类型。对于更复杂的输入对象类型，JSON标量可能位于嵌套字段中。该except选项可让您配置这些类型内的嵌套字段以保持__typename不变。

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

变量声明的类型为DashboardInput将移除任何顶层__typename字段，但保持config字段的__typename。

此嵌套可以有多深，需要多少字段就有多少字段。使用KEEP哨兵来确定__typename应该保留的位置。

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

要在数组中的嵌套字段中保留__typename，请使用与字段为对象类型时的相同对象表示法。

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

选项

名称类型	描述
`except` `KeepTypenameConfig`	确定哪些输入类型应该保留`__typename`。此映射输入类型到配置，该配置可以是`KEEP`哨兵或字段的嵌套配置。

移除Typename Link

自动从变量中删除 __typename 字段。

从所有变量中删除__typename

用法

在JSON标量中保留`__typename`

输入变量中的嵌套JSON标量字段

选项

except

从所有变量中删除`__typename`

`except`