为什么采用GraphQL？

GraphQL和Apollo帮助您更快地交付功能

在现代应用程序中管理数据具有挑战性。大多数应用程序需要

针对多个平台（网页、iOS等）的不同前端客户端，每个客户端都有不同的数据需求
后端从多个来源（Postgres、Redis等）为客户端提供数据
前端和后端的复杂状态和缓存管理

通过采用GraphQL 和 Apollo，您可以将这些挑战大大降低。GraphQL的声明性模型帮助您创建一个一致、可预测的API，您可以使用它来满足所有客户端的需求。随着您添加、删除和迁移后端数据存储，该API在客户端视角上不会发生变化。

即便具有许多其他优势， GraphQL 的最大好处是它为开发者提供的体验。向API中添加新的类型和字段非常简单，客户端开始使用这些字段也同样简单。这有助于您快速设计、开发和部署功能。

结合Apollo开源库，复杂的考虑因素，如缓存、数据规范化和乐观的UI渲染，也变得简单直接。

GraphQL提供声明性、高效的数据获取

GraphQL在数据获取方面的声明性方法，与REST API相比提供了显著的性能和用户体验提升。

考虑一个显示本地动物避难所可供领养的可爱宠物的网页。 🐶

使用REST

使用REST，页面可能需要

GET 从 /api/shelters 端点获取庇护所及其对应的 pet_id 列表
GET通过向/api/pets/PET_ID发送单独的请求来获取每只宠物详情（名称、照片URL等）。

这种方案需要多次依赖的网络请求，可能会导致页面加载速度变慢，并在移动设备上增加额外的电池消耗。这种逻辑也难以在其他显示略微不同数据的页面上重用。

使用GraphQL

使用 GraphQL，页面可以通过向单个端点发送单个查询来获取所有这些数据。查询如下所示：

1
query GetPetsByShelter {
2
  shelters {
3
    name
4
    pets {
5
      name
6
      photoURL
7
    }
8
  }
9
}

此查询描述了我们需要从GraphQL服务器获取的数据形状。服务器负责组合和过滤后端数据，返回我们请求的确切数据。这保持了数据负载的大小，特别是与可能返回数百个不必要字段的大型REST端点相比。

要执行与上方类似的查询，页面使用 GraphQL客户端，例如 Apollo客户端，代码类似于以下（以React应用程序为例）：

mainpage.jsx

1
// Define the query
2
const GET_PETS_BY_SHELTER = gql`
3
  query GetPetsByShelter {
4
    shelters {
5
      name
6
      pets {
7
        name
8
        photoURL
9
      }
10
    }
11
  }
12
`;
13

14
function MainPage() {
15
  // Execute the query within the component that uses its result
16
  const { loading, error, data } = useQuery(GET_PETS_BY_SHELTER);
17

18
  if (error) return <Error />;
19
  if (loading || !data) return <Fetching />;
20

21
  // Populate the component using the query's result
22
  return <PetList shelters={data.shelters} />;
23
}