利用 GraphQL 精简 API-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一个用于 API 的查询语言和运行时环境。它提供了一种更有效、更强大和更灵活的方法来获取和修改数据，从而比 RESTful API 更适合进行前后端数据交互。

在本文中，我们将向大家介绍 GraphQL 及其优势，以及如何在前端类项目中应用 GraphQL 来精简 API，并减少前后端之间的通信。

1. GraphQL 简介

GraphQL 是 Facebook 开发的一种新型数据查询语言。它是一种 API 查询语言，能够帮助客户端准确地获取它们想要的数据，避免了被误认为 API 需要退化成一个大而混乱的端点（endpoint）。

与 REST API 不同的是，GraphQL 允许客户端指定只需要哪些数据，从而减少了传输中的冗余数据，这对于手机端数据传输的情形尤为重要。

2. GraphQL 优势

自定义返回数据

GraphQL 允许客户端指定自己需要的数据字段，服务器将其组合为一个唯一结果集返回。因此GraphQL可以大大减小数据传输量，提高网络传输效率。

精细控制API数据

GraphQL允许客户端查询多种数据与操作，从数据查询、变换到操作，GraphQL都提供了完整的支持。

节省网络资源

REST API通常需要访问多个端点来获取数据，而GraphQL通过一次查询，就能够一次请求获取多种数据。

语言无关性

GraphQL支持面向所有后端的思想，因此不受后端语言限制。可以使用任何服务器框架或编程语言组合API。

3. 利用 GraphQL 优化 API

下面我们来介绍如何在前端类项目中应用 GraphQL 来精简 API，并减少前后端之间的通信。

在实际操作中，我们需要使用以下步骤：

步骤一：定义 GraphQL Schema

GraphQL schema 是用于定义 GraphQL 查询和变异类型的纯 JavaScript 对象。通过定义 schema，我们可以显式地指定客户端可以请求哪些属性以及如何查询它们。在实际中，我们可以使用 graphQL-tools 库构建 GraphQL Schema。

例如，我们在 schema.js 中定义如下 schema：

// www.javascriptcn.com code example
const { gql } = require('apollo-server');

const typeDefs = gql`
  type User {
    id: ID!
    name: String!
    email: String!
  }

  type Query {
    users: [User]
  }
`;

module.exports = typeDefs;

步骤二：定义 Resolver

Resolver 是一个函数，用于解析 schema 中定义的每个字段。Resolver 接受输入参数，然后执行必要的操作，并返回请求的数据。

const resolvers = {
  Query: {
    users: () => {
      // 获取用户信息
      return getUser();
    }
  }
};

步骤三：启动 GraphQL 服务器

我们可以使用 Express 来启动服务器，并将 schema 和 resolver 与 graphQL 绑定。

// www.javascriptcn.com code example
const { ApolloServer } = require('apollo-server-express');

// 将 Schema 和 Resolver 与 GraphQL 绑定
const server = new ApolloServer({ typeDefs, resolvers });

// 绑定至 Node.js HTTP 服务器上
server.applyMiddleware({ app: expressApp });

// 监听
app.listen(3000, () => {
  console.log('Server started on http://localhost:3000/graphql');
});

步骤四：客户端使用 GraphQL API

在客户端，我们可以使用 graphQL client，例如 Apollo Client 来查询和获取数据：

// www.javascriptcn.com code example
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:3000/graphql',
  cache: new InMemoryCache(),
});

// 查询用户信息
const getUsers = async () => {
  const { data } = await client.query({
    query: gql`
      query getUsers {
        users {
          name
          email
        }
      }
    `,
  });
  return data.users;
};

小结

在前后端分离的架构下，GraphQL 不仅可以减少数据传输量，而且还可以灵活地满足前端的需求，以及减轻后端开发的负担。GraphQL 的灵活性和高效性，使得它在前端类项目中得到广泛应用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d92e5aa941bf71340b507b

利用 GraphQL 精简 API