GraphQL 查询最佳实践

创建查询时mutate，遵循以下最佳实践以充分利用 GraphQL 和 Apollo 工具。

为所有操作命名

这两个查询获取相同的数据

1
# Recommended ✅
2
query GetBooks {
3
  books {
4
    title
5
  }
6
}
7

8
# Not recommended ❌
9
query {
10
  books {
11
    title
12
  }
13
}

第一个 查询被命名为 GetBooks。第二个 查询是匿名的。

你应该为你的应用程序中的每个 GraphQL 操作定义一个名称。这样做能带来以下好处：

• 你将为每个操作明确目的，这不仅对你自己，也对你的同事。
• 在单个查询文档中将多项操作合并，可以避免意料之外的错误（匿名操作只能单独出现）。
• 在客户端和服务器代码中改进调试输出，帮助您准确地确定哪个操作导致问题。
• Apollo Studio提供了有用的操作级指标，这需要命名操作。

使用GraphQL变量提供参数

这两个查询都可以获取ID为"5"的Dog对象：

1
# Recommended ✅
2
query GetDog($dogId: ID!) {
3
  dog(id: $dogId) {
4
    name
5
    breed
6
  }
7
}
8

9
# Not recommended ❌
10
query GetDog {
11
  dog(id: "5") {
12
    name
13
    breed
14
  }
15
}

第一个查询使用变量（$dogId）作为dog字段的必需参数的值。这意味着您可以使用查询来获取Dog对象，其任何ID，使其更具可重用性。

您可以将变量值传递给useQuery（或useMutation）

1
const GET_DOG = gql`
2
  query GetDog($dogId: ID!) {
3
    dog(id: $dogId) {
4
      name
5
      breed
6
    }
7
  }
8
`;
9

10
function Dog({ id }) {
11
  const { loading, error, data } = useQuery(GET_DOG, {
12
    variables: {
13
      dogId: id
14
    },
15
  });
16
  // ...render component...
17
}

硬编码GraphQL参数的缺点

除了可重用性，与变量相比，硬编码参数还有其他缺点：

减少了缓存效果

如果两个本质上完全相同的查询具有不同的硬编码参数值，则您的GraphQL服务器将它们视为完全不同的操作。缓存使您的服务器能够跳过前已遇到的操作的解析和验证，从而提高性能。

服务器端缓存还支持以下特性：自动持久查询和查询计划在一个联邦网关中。硬编码的参数会降低这些特性的性能提升，并且占用缓存中的有用空间。

降低信息隐私

GraphQL参数的值可能包含敏感信息，例如访问令牌或用户的个人信息。如果这些信息包含在查询字符串中，则与其他查询字符串一起进行缓存。

变量值不包括在查询字符串中。您还可以指定哪些变量值（如有）包含在向Apollo Studio发送的度量指标报告中。

只查询你所需要的数据，在需要的地方获取数据

与传统的REST API相比，GraphQL最大的优势之一是其对声明式数据获取的支持。每个组件都可以（并且应该）查询其渲染所需的字段，而无需通过网络发送多余的数据。

如果您的顶级组件执行了一个巨大的查询以获取所有子组件的数据，那么它可能代表了一些甚至没有渲染的组件进行查询。这可能导致响应延迟，并且极大地降低了查询结果可以被服务器端响应缓存重新使用的可能性。

在大多数情况下，以下查询应该分解为由适当组件分布的多个多个查询：

1
# Not recommended ❌
2
query GetGlobalStatus {
3
  stores {
4
    id
5
    name
6
    address {
7
      street
8
      city
9
    }
10
    employees {
11
      id
12
    }
13
    manager {
14
      id
15
    }
16
  }
17
  products {
18
    id
19
    name
20
    price {
21
      amount
22
      currency
23
    }
24
  }
25
  employees {
26
    id
27
    role
28
    name {
29
      firstName
30
      lastName
31
    }
32
    store {
33
      id
34
    }
35
  }
36
  offers {
37
    id
38
    products {
39
      id
40
    }
41
    discount {
42
      discountType
43
      amount
44
    }
45
  }
46
}

• 如果您有一组始终一起渲染的组件，可以使用片段来在这些组件之间分配单个查询的结构。请参阅片段定位。
• 如果您正在查询一个返回的项多于组件需要渲染的列表字段，您应该对该字段进行分页。

分别查询全局数据和用户特定数据

某些字段返回的数据，无论哪个用户查询都是相同的：

1
# Returns all elements of the periodic table
2
query GetAllElements {
3
  elements {
4
    atomicNumber
5
    name
6
    symbol
7
  }
8
}

其他字段返回的数据根据查询它们的用户而不同：

1
# Returns the current user's documents
2
query GetMyDocuments {
3
  myDocuments {
4
    id
5
    title
6
    url
7
    updatedAt
8
  }
9
}

为了提高您服务器的性能服务器端响应缓存，尽可能地在单独的查询中获取这两种类型的字段。这样做的话，您的服务器可以为查询如GetAllElements缓存单个响应，同时为每个执行GetMyDocuments的用户缓存单独的响应。

为您的应用程序设置名称和版本以进行指标报告（付费）

构造函数ApolloClient接受名称和版本选项：

1
const client = new ApolloClient({
2
  uri: 'https://127.0.0.1:4000/graphql',
3
  cache: new InMemoryCache(),
4
  name: 'MarketingSite',
5
  version: '1.2'
6
});

如果您指定了这些值，Apollo客户端会自动将这些值添加到每个操作请求的HTTP头中（apollographql-client-name和apollographql-client-version）。

然后，如果您在Apollo Studio中配置了指标报告，Apollo服务器将包括您的应用程序的名称和版本在它向Studio报告的操作跟踪中。这使得您能够按客户端分段指标。