使用 Next.js​​和 Hasura 构建快速高效的 GraphQL API

在现代 Web 开发中，GraphQL 已经成为了一种越来越流行的 API 规范。它通过定义数据模型和查询语言来提供高效的数据获取和操作方式。在这篇文章中，我们将介绍如何使用 Next.js 和 Hasura 构建一个快速、高效的 GraphQL API。

什么是 Next.js 和 Hasura？

Next.js 是一个基于 React 的服务器端渲染框架，它可以帮助我们快速构建高性能的 Web 应用程序。它提供了许多有用的功能，例如静态生成、数据预取和基于文件的路由系统。

Hasura 是一个开源的 GraphQL 引擎，它可以将任何现有的 Postgres 数据库转换成一个 GraphQL API。Hasura 提供了许多有用的功能，例如实时数据更新、权限管理和高性能查询。

通过结合使用 Next.js 和 Hasura，我们可以快速构建出一个高效的 GraphQL API，而无需编写任何后端代码。

开始构建

首先，我们需要创建一个新的 Next.js 项目。我们可以使用以下命令：

npx create-next-app my-app

然后，我们需要安装 Hasura CLI。我们可以使用以下命令：

npm install -g hasura-cli

接下来，我们需要创建一个新的 Hasura 项目。我们可以使用以下命令：

hasura init my-project

在创建项目之后，我们需要将 Hasura 配置为与我们的 Next.js 应用程序一起运行。我们可以使用以下命令：

cd my-project
hasura console

这将在我们的浏览器中打开一个 Hasura 控制台。我们可以使用控制台来管理我们的数据库和 GraphQL API。

接下来，我们需要创建一个数据表。我们可以使用以下命令：

hasura migrate create my-migration --from-server

这将创建一个新的迁移文件。我们可以使用以下命令来编辑它：

hasura migrate edit my-migration

在迁移文件中，我们可以使用 SQL 语句来定义我们的数据表。例如，以下是一个简单的用户表：

CREATE TABLE users (
  id SERIAL PRIMARY KEY,
  name TEXT NOT NULL,
  email TEXT NOT NULL UNIQUE,
  password TEXT NOT NULL
);

完成后，我们可以使用以下命令将迁移应用到我们的数据库中：

hasura migrate apply

然后，我们可以使用 Hasura 控制台来定义我们的 GraphQL API。我们可以使用以下命令重新打开控制台：

hasura console

在控制台中，我们可以使用“数据”选项卡来定义我们的 GraphQL 数据模型。我们可以使用“数据”选项卡中提供的编辑器来定义我们的 GraphQL 类型和查询。

例如，以下是一个简单的用户类型：

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

我们可以使用“数据”选项卡中的“表”选项来将我们的 Postgres 数据表映射到 GraphQL 类型。我们可以选择“users”表，并将其映射到“User”类型。

然后，我们可以使用“数据”选项卡中的“查询”选项来定义我们的 GraphQL 查询。例如，以下是一个简单的查询：

query {
  users {
    id
    name
    email
  }
}

完成后，我们可以使用以下命令将我们的 GraphQL API 部署到 Hasura 引擎中：

hasura metadata apply
hasura migrate apply

现在，我们已经完成了我们的 GraphQL API 的定义和部署。接下来，我们可以使用 Next.js 来访问它。

访问 GraphQL API

为了访问我们的 GraphQL API，我们需要使用一个 GraphQL 客户端。在这篇文章中，我们将使用 Apollo 客户端。我们可以使用以下命令来安装它：

npm install @apollo/client graphql

然后，我们可以在我们的 Next.js 应用程序中创建一个 Apollo 客户端。例如，以下是一个简单的客户端：

import { ApolloClient, InMemoryCache } from '@apollo/client';

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

export default client;

在创建客户端之后，我们可以使用它来访问我们的 GraphQL API。例如，以下是一个简单的查询：

-- -------------------- ---- -------
------ - --- - ---- -----------------
------ ------ ---- ----------------

----- ----- - ----
  ----- -
    ----- -
      --
      ----
      -----
    -
  -
--

------ ------- -------- ------ ----- -- -
  ------ -
    ----
      ----------------- -- -
        --- --------------
          ----------- --------------
        -----
      ---
    -----
  --
-

------ ----- -------- ---------------- -
  ----- - ---- - - ----- -------------- ------ ----- ---
  ------ - ------ - ------ ---------- - --
-

在这个例子中，我们使用了“getStaticProps”函数来预取数据，并将其作为属性传递给我们的页面组件。

结论

通过结合使用 Next.js 和 Hasura，我们可以快速构建出一个高效的 GraphQL API，而无需编写任何后端代码。在这篇文章中，我们介绍了如何创建一个 Next.js 应用程序并将其与 Hasura 集成。我们还介绍了如何使用 Apollo 客户端来访问我们的 GraphQL API。希望这篇文章能够帮助你开始构建自己的 Next.js 和 Hasura 应用程序。

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