查询序列 GraphQL - JavaScript

GraphQL 是一种用于 API 的查询语言。它是一种与特定数据库、编程语言无关的协议，使客户端能够在单个请求中通过声明需要的数据来规划响应。 本文介绍 GraphQL 在 JavaScript 中的使用，包括查询语法、构建服务器和客户端等。

查询语句

查询

查询是从服务端请求数据的方式。GraphQL 的查询语句类似于 JSON，但是具有更多的高级功能。 一个简单的查询示例如下：

query {
  user(id: 1) {
    name
    email
  }
}

该查询请求用户 ID 为 1 的名称和电子邮件地址。在 GraphQL 中，查询语句总是从根节点开始，并且可以向下添加任意数量的字段。

变量

在实际使用中，您需要动态传递参数，而不是硬编码。变量允许您在查询语句中使用参数。变量由 $ 符号开头。

query($id: Int!) {
  user(id: $id) {
    name
    email
  }
}

该查询现在使用变量 $id，类型为 Int，带有一个非空值。 在运行时，您需要将变量传递给查询。在绝大多数情况下，您需要使用一个客户端库。

片段

GraphQL 具有的一个强大特性是片段。片段对于针对相同数据的多个查询非常有用。在设计 GraphQL API 时，您可以通过为数据类型定义片段来开发可重用的查询，以公开 API。

fragment UserFields on User {  
  name
  email
}

query($id: Int!) {
  user(id: $id) {
    ...UserFields
  }
}

该查询使用了名为 UserFields 的片段，它定义了要检索的用户数据类型的常规字段。

服务器端

在服务器端，您需要实现一个 GraphQL API 端点。GraphQL 通过侦听 HTTP 请求来处理查询请求并返回数据。 Express 是一个流行的 Node.js Web 框架，可以为 GraphQL API 提供支持。

声明schema

在 GraphQL 中，必须明确定义服务端数据模型，从而才能处理来自客户端的查询请求。构建 GraphQL schema 的方式是，定义数据模型的类型及其字段，在GraphQL schema内创建 Query。

const typeDefs = `
  type Query {
    user(id: Int!): User
  }

  type User {
    name: String
    email: String
  }
`;

处理查询请求

在服务器端，您需要定义可以处理查询请求的函数。这些函数接收客户端查询作为入参，返回一个 Promise 对象，该 Promise 对象解析为客户端查询期望的响应 JSON。

const resolvers = {
  Query: {
    user: (root, { id }) => {
      // 从数据库或其他存储中检索数据
      return getUserById(id);
    },
  },
};

const server = new ApolloServer({ 
  typeDefs, 
  resolvers 
});

server.listen().then(({ url }) => {
  console.log(`Server listening at ${url}`);
})

上面的代码监听 HTTP 请求，并将其传递到 Apollo Server，该服务器处理 GraphQL 查询请求。

客户端

确保已安装官方的 graphql-client 客户端库，安装方式如下：

npm install graphql graphql-tag apollo-boost --save

引入精简的 apollo-client

Apollo Client为使用 GraphQL 的应用程序提供了一流的支持，尤其是 React 应用。其中，apollo-boost 包括一系列有用的功能，如 Apollo Cache、Apollo Link 等。

import ApolloClient from 'apollo-boost';

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

处理查询请求

从客户端获取数据时，您需要遵循与服务器端相同的数据类型和控制元。客户端 SDK 提供一种以声明的方式定义查询请求及其参数的方法。

import gql from 'graphql-tag';

const GET_USER = gql`
  query User($id: Int!) {
    user(id: $id) {
      name
      email
    }
  }
`;

client.query({
  query: GET_USER,
  variables: { id: 1 },
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});

在上面的代码段中，您定义了一个名为 GET_USER 的 GraphQL 查询请求，它通过变量 id 调用服务器上的 user 查询。您调用 Apollo Client 的 query 方法，该方法将 GET_USER 查询请求作为参数，同时传递需要的变量，并返回一个 promise，该 promise 的响应包含服务器返回的数据。