如何构建 Next.js + GraphQL 项目

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

介绍

在前端开发中,构建复杂的应用程序需要涉及跨越不同技术层次的很多方面,而采用 Next.js 和 GraphQL 可以作为一种有效的解决方案,特别是对于需要集成数据的 Web 应用程序。

Next.js 是一个基于 React 的轻量级框架,它支持服务器端渲染、静态文件生成和客户端渲染,并且还能支持构建静态页面。GraphQL 是一种 API 查询语言和运行时,在 Web 建模方面受到了广泛的欢迎。

本文将介绍如何结合 Next.js 和 GraphQL 这两种技术来构建一个简单的项目。

设计目标

本教程将构建一个 Github 用户搜索应用,它将从 Github API 中获取数据,在 Next.js 应用中显示和查询这些数据。

对于这个应用程序的设计,我们将首先构建一些典型的 GraphQL 查询,并在 Next.js 应用程序中实现这些查询。

具体而言,以下是我们的目标:

  1. 使用 Apollo 客户端查询 GitHub API。
  2. 创建 Next.js 应用程序并在服务器端生成静态文件。
  3. 在客户端呈现静态页面并集成 Apollo 客户端。
  4. 使用 GitHub API 搜索用户。
  5. 在 Next.js 应用程序中构建一个搜索表单。
  6. 使用 GitHub API 获取用户仓库。
  7. 列出用户所有的仓库并在 Next.js 中显示列表。

步骤 1 - 准备工作

在开始之前,需要确保已经安装好以下工具:

  • Node.js 和 npm
  • 一个用于 Github 的 OAuth 应用程序(用于获取访问令牌)

可以在 GitHub Developer Settings 中创建一个 OAuth 应用程序,该应用程序将为我们提供 GitHub API 的访问令牌。

还需要在本地创建一个新的目录并在其中初始化一个新的 npm 项目,如下所示:

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

步骤 2 - 创建 GraphQL 服务器

在本步骤中要安装一些库,包括 Apollo Server 和 GraphQL。Apollo Server 是一个强大的库,可以帮助我们轻松创建一个 GraphQL 服务端。

首先,需要使用以下命令安装所需的依赖项:

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

在本地项目目录下创建一个名为server.js文件,并向其中添加以下代码:

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

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

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

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

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

在这个例子中,我们定义了一个名为hello的 GraphQL 查询,当客户端发出这个查询时,服务端会响应一个字符串“Hello World!”。

然后,运行以下命令启动服务器:

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

在浏览器中访问 http://localhost:4000/,可以看到 GraphQL Playground 工具。

现在,可以在左侧面板中输入我们的查询,然后在右侧面板中查看响应结果。

步骤 3 - 集成 Github API

为了能够从 Github API 获取数据,需要安装几个依赖项:

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

然后,需要创建一个新的 Apollo 客户端,以便发出 GraphQL 查询。

在本地项目目录下创建一个lib/apollo.js文件,并向其中添加以下代码:

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

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

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

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

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

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

以上代码创建了一个 Apollo 客户端实例,使它可以发送带有身份验证的 HTTP 请求。

为了使身份验证正常工作,还需要将 Github API 的访问令牌保存在环境变量 GITHUB_TOKEN 中。

可以使用如下命令在命令行中设置环境变量:

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

步骤 4 - 创建 Next.js 应用程序

在本步骤中要安装一些库,包括 React、Next.js、Apollo React 和 @zeit/next-css。

使用以下命令安装依赖项:

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

在项目根目录下创建一个名为pages/index.js的文件,并向其中添加以下代码:

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

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

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

在本例中,我们创建了一个名为“GitHub User Search”的页面,它仅由 SearchForm 和 List 组件组成。

组件 SearchForm 可以帮助用户搜索Github上的用户,而组件 List 将显示查询结果。

现在,需要在根目录下创建一个名为next.config.js的文件,并向其中添加以下代码:

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

这个配置文件允许使用 CSS 样式表。

因此,在本例中,我们还需要在项目的根目录下创建一个名为“styles.css”的文件。在这个文件中,可以添加一些样式来美化我们的页面。

添加以下内容到“styles.css”:

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

此样式将使 .container 元素始终保持在内容宽度为800像素的范围内,并且位于页面的中央。

在本地命令行窗口中,运行以下命令:

--- --- ---

这会启动 Next.js 开发服务器,并在浏览器中显示应用程序。

步骤 5 - 创建搜索表单

在本步骤中,我们要创建 SearchForm 组件。

首先,创建一个新的名为“components/search-form/SearchForm.js”的文件,并向其中添加以下代码:

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

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

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

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

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

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

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

在 SearchForm 组件中,首先我们创建了一个名为“GET_USER_REPOS”的 GraphQL 查询,该查询将从 Github API 中检索用户的信息。

接下来,我们定义一个状态名称为“username”的状态,这是用户输入的表单中的 Github 用户名。

然后,我们使用 Apollo@React-Hooks 的useQuery Hook 发送 GraphQL 查询,并将变量作为变量传递给它,以在后台检索用户的数据。

最后,我们在页面上呈现了一个搜索表单,该表单允许用户搜索 Github 用户。

步骤 6 - 创建列表组件

在本步骤中,我们将创建 List 组件,并在其中显示用户和用户的仓库。

components/list/List.js 中添加以下代码:

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

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

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

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

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

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

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

在 List 组件中,我们再次定义了一个名为“GET_USER_REPOS”的 GraphQL 查询,该查询将从 Github API 中检索用户的信息。

接下来,我们定义一个状态名称为“username”的状态,这是用户输入的表单中的 Github 用户名。

然后我们再次使用 Apollo@React-Hooks 的useQuery Hook 发送 GraphQL 查询,并将变量作为变量传递给它,以在后台检索用户的数据。

最后,我们呈现了一个列表元素,该元素显示用户及其仓库信息。

结论

本文展示了如何使用 Next.js 和 GraphQL 构建一个 Github 用户搜索应用程序。我们创建了一个功能完整的应用程序,它充分展示了利用 Next.js 和 GraphQL 进行开发的许多优势。

还有更多可集成的其他功能,如 GraphQL 操作记录和错误状态,这些功能也可以通过 Apollo 客户端轻松添加。

Next.js 和 GraphQL 搭配在一起可以提供无限的可能性。它们使应用程序的设计和写作更加简单,并可以提供更好的用户体验。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/67163efaad1e889fe21b8a22


猜你喜欢

  • Headless CMS 自动构建和部署的最佳实践

    当今的web应用通常十分复杂,通常需要多个技术栈和工具来实现。其中,内容管理系统(CMS)是其中一个必要的组件,它负责管理网站或应用程序的内容和数据。Headless CMS是一种新型的CMS,与传统...

    18 天前
  • MongoDB 安全设置的检查方法

    简介 MongoDB 是一个开源的 NoSQL 数据库,被广泛应用于前端开发中。但是,MongoDB 的默认配置并不足以保证安全性,因此需要进行一些安全设置。 本文将介绍 MongoDB 安全设置的检...

    18 天前
  • Koa 项目中使用 PM2 进行进程管理的技巧与实践

    在开发 Koa 项目时,进程管理是非常重要的一环。为了提高应用程序的稳定性和可用性,我们需要对进程进行管理和监控。PM2 就是一个非常好用的进程管理工具,可以让我们更加容易地管理和监控进程,并且可以通...

    18 天前
  • 如何降低 ES9 的内存占用

    随着前端项目越来越复杂,ES9 作为前端开发的脚本语言,占用的内存也越来越高。为了提高项目的性能和用户体验,降低 ES9 的内存占用是必不可少的。 本文将介绍几种降低 ES9 内存占用的技巧,包括使用...

    18 天前
  • Material Design 如何应用于图片分享应用中

    在现代应用程序设计中,Material Design 已经成为一种流行的设计语言。它具有可扩展性和可适应性,可以应用于各种应用程序设计,包括图片分享应用。本文将介绍 Material Design 如...

    18 天前
  • Mongoose 在 update 操作中使用 $set 操作符的好处

    在使用 Node.js 开发 Web 应用程序时,Mongoose 是 Node.js 的一种优秀的 ORM(Object Relational Mapping)框架,它为我们提供了一种更简单的方式来...

    18 天前
  • 如何使用 Jest 测试 ES6 模块

    在现代前端开发中,使用模块化机制是必不可少的。ES6 模块已经成为了前端开发中最常用的一种模块化方案。然而,测试是保证应用质量的重要步骤之一。本文将介绍如何使用 Jest 测试 ES6 模块,并提供详...

    18 天前
  • 使用 Express.js 和 MongoDB 进行身份验证和授权管理

    在构建 Web 应用程序时,安全是必不可少的一部分。在这个过程中,身份验证和授权管理都是非常重要的方面。本文将介绍如何使用 Express.js 和 MongoDB 让身份验证和授权管理变得更加简单。

    18 天前
  • 解决 Tailwind CSS 在 Laravel Mix 中无效的问题

    Tailwind CSS 是一个非常流行的 CSS 框架,它可以让开发者快速构建出现代化的 Web UI,并提供了丰富的样式工具。在使用 Tailwind CSS 的过程中,很多开发者会遇到一个问题,...

    18 天前
  • 使用 Jest 和 Enzyme 测试 React 应用

    在开发 React 应用时,测试是很重要的一环。Jest 和 Enzyme 是 React 应用测试中常用的工具。Jest 是 Facebook 开源的 JavaScript 测试框架,Enzyme ...

    18 天前
  • Deno 中使用 MongoDB 的步骤及注意事项

    介绍 Deno 是一个用于运行 JavaScript 和 TypeScript 的运行时环境,它是由 Node.js 的创始人 Ryan Dahl 开发的,旨在解决 Node.js 中存在的一些问题。

    18 天前
  • 使用 PM2 实现 Node.js 任务调度

    使用 PM2 实现 Node.js 任务调度 在前端开发中,我们经常会涉及到任务调度,例如定时任务、异步任务等。为了能够方便地实现任务调度,我们可以使用 PM2。 PM2 是一个强大的 Node.js...

    18 天前
  • Redis 并发竞争问题的分析及解决方案

    引言 Redis 是当前流行的 NoSQL 数据库之一,被广泛应用于各种应用场景,包括缓存、消息队列、游戏等。由于 Redis 的性能优异,许多应用都使用了 Redis 而导致并发访问增多,Redis...

    18 天前
  • Koa2 中使用 Joi 进行请求数据验证的技巧与实现方法

    在前端开发中,数据的传输和验证是十分重要的一环。Koa2 是一个流行的 Node.js 框架,而 Joi 是一个非常好用的 Node.js 库,可以帮助我们进行请求数据的验证,提高应用程序的安全性和数...

    18 天前
  • Hapi 进阶:如何使用 Hapi-Jwt2 插件实现全局请求身份验证

    在现代 web 应用程序中,保护后端 API 非常重要。因此,要求每个 API 请求都需要从客户端传递有效的身份验证令牌。在 Hapi 中,使用 Hapi-Jwt2 插件,可以方便地实现全局请求身份验...

    18 天前
  • 使用 Webpack 搭建基于 TypeScript 的工程

    前言 随着现代 web 应用程序特别是单页面应用程序的增多,前端工程正在成为一种必不可少的实践。Webpack 是其中一种广泛使用的打包工具。 Webpack,是一个用于构建现代 JavaScript...

    18 天前
  • Vue.js 开发中常见坑点及解决方法

    Vue.js 是一个流行的 JavaScript 框架,用于开发 Web 应用程序的前端。尽管它被认为是易于上手的,但在开发过程中,仍然会遇到一些常见的坑点。在本文中,我们将探讨 Vue.js 开发中...

    18 天前
  • 使用 Kubernetes 进行容器自动伸缩的详细教程

    前言 随着云计算的发展,更多的应用程序开始运行在容器中。作为一种轻量级的虚拟化技术,容器具有快速部署、易于管理的优势。但是,容器的自动伸缩问题是容器化应用程序中的一个重要挑战,因为容器的数量可以随着负...

    18 天前
  • Promise 的实现原理分析及优化方法

    前言 在编写复杂的异步代码时,回调地狱是非常常见的现象。为了解决这个问题,JavaScript社区提供了一种新的方案,Promise。 Promise语法简洁、易于理解,可以将异步函数调用串联起来,提...

    18 天前
  • 使用 React.js 实现 SPA 应用中的人性化操作及提示

    单页面应用(SPA)在现代 Web 开发中越来越受欢迎,因为它们可以提供更加流畅的用户体验和更快的页面加载速度。在开发 SPA 应用时,有些人觉得用户体验和提示并不是特别重要。

    18 天前

相关推荐

    暂无文章