介绍
在前端开发中，构建复杂的应用程序需要涉及跨越不同技术层次的很多方面，而采用 Next.js 和 GraphQL 可以作为一种有效的解决方案，特别是对于需要集成数据的 Web 应用程序。
Next.js 是一个基于 React 的轻量级框架，它支持服务器端渲染、静态文件生成和客户端渲染，并且还能支持构建静态页面。GraphQL 是一种 API 查询语言和运行时，在 Web 建模方面受到了广泛的欢迎。
本文将介绍如何结合 Next.js 和 GraphQL 这两种技术来构建一个简单的项目。
设计目标
本教程将构建一个 Github 用户搜索应用，它将从 Github API 中获取数据，在 Next.js 应用中显示和查询这些数据。
对于这个应用程序的设计，我们将首先构建一些典型的 GraphQL 查询，并在 Next.js 应用程序中实现这些查询。
具体而言，以下是我们的目标：
- 使用 Apollo 客户端查询 GitHub API。
- 创建 Next.js 应用程序并在服务器端生成静态文件。
- 在客户端呈现静态页面并集成 Apollo 客户端。
- 使用 GitHub API 搜索用户。
- 在 Next.js 应用程序中构建一个搜索表单。
- 使用 GitHub API 获取用户仓库。
- 列出用户所有的仓库并在 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