使用 Next.js 和 Hasura 构建 GraphQL API-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种用于 API 的查询语言，它使得前端开发者可以更加灵活地请求数据。Next.js 是一个基于 React 的框架，它可以帮助我们快速构建高性能的应用程序。Hasura 是一个开源的 GraphQL 引擎，它可以帮助我们轻松地将数据库转换为 GraphQL API。在本文中，我们将介绍如何使用 Next.js 和 Hasura 构建 GraphQL API。

安装 Hasura

首先，我们需要安装 Hasura。你可以在 Hasura 的官方网站上下载 Hasura 的安装包，也可以使用 Docker 安装 Hasura。

安装完成后，我们需要启动 Hasura 服务。你可以使用以下命令启动 Hasura：

$ hasura quickstart <project-name>
$ cd <project-name>
$ hasura console

这将启动 Hasura 控制台，并在浏览器中打开它。在控制台中，你可以看到 Hasura 创建了一个名为 default 的数据库，并且已经生成了一些默认的表。

创建 GraphQL API

现在我们已经启动了 Hasura 服务，接下来我们需要创建一个 GraphQL API。在 Hasura 控制台中，你可以看到一个名为 Data 的选项卡。在这个选项卡中，你可以创建表、定义关系和字段。在本文中，我们将创建一个简单的 users 表，并为它创建一个 GraphQL API。

首先，我们需要创建一个 users 表。在 Hasura 控制台中，选择 Data 选项卡，然后点击 Create Table 按钮。在弹出的对话框中，输入表的名称 users，然后点击 Add Column 按钮添加两个列 id 和 name。

接下来，我们需要为 users 表创建一个 GraphQL API。在 Hasura 控制台中，选择 GraphiQL 选项卡，然后输入以下代码：

type Query {
  users: [User!]!
}

type User {
  id: ID!
  name: String!
}

这个代码定义了一个名为 users 的查询，它将返回一个 User 类型的数组。User 类型包含 id 和 name 两个字段。

现在我们已经创建了一个 GraphQL API，接下来我们需要使用 Next.js 来访问它。

使用 Next.js 访问 GraphQL API

在我们开始使用 Next.js 访问 GraphQL API 之前，我们需要安装必要的依赖。在终端中输入以下命令：

$ npm install graphql apollo-boost react-apollo next-with-apollo

graphql 是一个用于编写 GraphQL 查询的 JavaScript 库。apollo-boost 是一个用于构建 Apollo 客户端的库。react-apollo 是一个用于在 React 应用程序中使用 Apollo 客户端的库。next-with-apollo 是一个用于在 Next.js 应用程序中使用 Apollo 客户端的库。

安装完成后，我们需要创建一个 apollo.js 文件来配置 Apollo 客户端。在根目录下创建一个名为 apollo.js 的文件，并输入以下代码：

// javascriptcn.com 代码示例
import withApollo from 'next-with-apollo';
import ApolloClient from 'apollo-boost';

export default withApollo(
  ({ ctx, headers, initialState }) =>
    new ApolloClient({
      uri: 'http://localhost:8080/v1/graphql',
      request: operation => {
        operation.setContext({
          headers: {
            ...headers,
            'x-hasura-admin-secret': '<your-admin-secret>',
          },
        });
      },
      initialState,
    })
);

这个代码定义了一个名为 apollo.js 的模块，它将创建一个 Apollo 客户端。uri 参数指定了 GraphQL API 的 URL。request 方法用于在每个请求中添加额外的请求头，例如我们在这里添加了一个名为 x-hasura-admin-secret 的请求头，它包含了我们在 Hasura 控制台中生成的管理员密钥。

现在我们已经配置了 Apollo 客户端，接下来我们需要在 Next.js 应用程序中使用它。在 Next.js 应用程序中，我们可以使用 getInitialProps 方法来获取数据。在我们的例子中，我们将使用 getInitialProps 方法来从 GraphQL API 中获取用户列表。

在我们的 Next.js 应用程序中，我们需要创建一个名为 index.js 的文件，并输入以下代码：

// javascriptcn.com 代码示例
import React from 'react';
import { gql } from 'apollo-boost';
import { Query } from 'react-apollo';
import withApollo from '../apollo';

const USERS_QUERY = gql`
  query {
    users {
      id
      name
    }
  }
`;

const Index = () => (
  <Query query={USERS_QUERY}>
    {({ loading, error, data }) => {
      if (loading) return <div>Loading...</div>;
      if (error) return <div>Error!</div>;

      return (
        <ul>
          {data.users.map(user => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      );
    }}
  </Query>
);

Index.getInitialProps = async ({ apolloClient }) => {
  await apolloClient.query({ query: USERS_QUERY });
};

export default withApollo(Index);

这个代码定义了一个名为 Index 的 React 组件，它将从 GraphQL API 中获取用户列表，并将其渲染成一个无序列表。我们使用 Query 组件来发送 GraphQL 查询，并使用 loading、error 和 data 属性来处理异步数据。getInitialProps 方法用于在服务器上获取数据，以便在客户端渲染时使用。

现在我们已经完成了 Next.js 应用程序的开发，接下来我们需要启动它。在终端中输入以下命令：

$ npm run dev

这将启动 Next.js 应用程序，并在浏览器中打开它。你应该可以看到一个名为 User List 的页面，它将显示从 GraphQL API 中获取的用户列表。

总结

在本文中，我们介绍了如何使用 Next.js 和 Hasura 构建 GraphQL API。我们首先安装了 Hasura，并使用 Hasura 控制台创建了一个简单的 users 表，并为它创建了一个 GraphQL API。接下来，我们使用 Next.js 和 Apollo 客户端访问了这个 GraphQL API，并将获取的数据渲染成一个无序列表。这个例子向我们展示了如何使用 Next.js 和 Hasura 构建高性能的 GraphQL API。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656f20ccd2f5e1655d7783e8