GraphQL 是现代化的 API 查询语言和运行时,它是面向客户端的 API,由 Facebook 开发并首次在 2015 年公开发布。GraphQL 旨在解决 REST API 的缺点,如过度获取或未能满足查询需求等问题。它支持前端和后端开发人员在相同的查询语言中编写、测试和部署 API。在 Next.js 中使用 GraphQL 可以简化前端的数据获取过程并提高系统的性能。
步骤
要在 Next.js 中使用 GraphQL,有以下几个步骤:
- 正确安装必需的 NPM 软件包。
GraphQL 的开发商提供了很多不同的库,用来支持在不同环境中实现 GraphQL。要在 Next.js 中使用 GraphQL,您需要安装一些关键的 NPM 软件包以便能够整合 GraphQL 查询和响应。这些软件包的安装方法如下:
--- ------- ------------ ------- ------------
- 向 Next.js 应用程序中添加一个 Apollo 客户端。
通过将 Apollo 客户端添加到 Next.js 应用程序中,您可以简化用于获取和处理数据的工作流。要添加 Apollo 客户端,请完成以下步骤:
首先,在 Next.js 应用程序中创建一个新文件夹(例如,设置名为 lib
),然后在其中添加一个新文件(例如,命名为 client.js
)。您可以使用以下代码初始化 Apollo 客户端:
------ - ------------ - ---- ---------------- ------ - -------- - ---- ------------------- ------ - ------------- - ---- ------------------------ ----- ---------------- - ---------------------- ----- -------- - --- ---------- ---- ----------------- --- ----- ----- - --- ---------------- ----- ------ - --- -------------- ----- --------- ------ ------ --- ------ ------- -------
其中,GRAPHQL_ENDPOINT
是您的 GraphQL API 端点的 URL。此代码创建了一个 Apollo 客户端实例并将其放置于私有命名空间中,以便其他组件可以使用它来发出数据查询和更改请求。
接下来,您需要确保 Next.js 应用程序可以访问此客户端。要做到这一点,请在 Next.js 应用程序中创建一个高阶组件并返回一个新的组件,该组件可以访问 Apollo 客户端。以下代码演示了如何完成此操作:
------ ----- ---- -------- ------ - -------------- - ---- --------------- ------ ------------ ---- ----------- ------ -------- --------------------- - ------ -------- ------------ -------- -- - ------ - --------------- ---------------------- ---------- ---------- -- ----------------- -- -- -
此高阶组件将 Apollo 客户端提供程序包装在 Next.js 应用程序中的组件中。请注意,此代码中的 ApolloProvider
组件始终从名为 client
的默认导入中检索客户端实例。
- 向 Next.js 中添加 graphQL 查询。
现在您已经成功安装了必需的 NPM 软件包和初始化了 Apollo 客户端,接下来需要使用 GraphQL 查询定义并发送数据请求。您可以通过创建一个 JavaScript 模块来完成此操作,该模块导出一个 query 变量和一个函数,其中该函数使用 Apollo 客户端来执行查询并返回结果。以下代码演示了如何创建这样的模块:
------ --- ---- -------------- ------ ------------ ---- ----------- ------ ----- --------- - ---- ----- - ----- - -- ----- ---- - - -- ------ ----- -------- ---------- - ----- - ---- - - ----- -------------------- ------ ---------- --- ------ ----------- -
此代码定义了一个名为 GET_POSTS
的 GraphQL 查询,并实现了一个名为 getPosts
的函数,该函数使用 Apollo 客户端查询从 GraphQL API 中检索所有帖子。请注意,此 codepen import 了 ApolloClient
from './client',此代码中的 gql
组件来自导入 graphql-tag
。您可以通过更改此查询和相关函数来创建任意数量的查询和 API 调用,来满足您的业务需求。
案例分析:使用 Next.js 和 GraphQL 获取数据
假设您的 Next.js 应用程序需要从远程 GraphQL API 加载数据并在页面中呈现。下面是一些代码片段,该示例演示了如何加载 GraphQL 数据并在 Next.js 中使用它渲染组件。
为了设置这个例子,您需要一个远程服务器和 GraphQL API。 Facebook 提供了一个简单的 GraphQL API(https://swapi-graphql.netlify.app/.),其允许您从“星球大战”的官方 API 中加载数据。无论您使用哪个 GraphQL API,都可以使用下面的示例代码来说明如何使用GraphQL API 加载和渲染数据。
首先在 Next.js 应用程序中创建一个空白页面(如 index.js),然后添加以下内容以在加载组件时加载限定的 GraphQL 数据:
------ - ---------- - ---- ---------------- ------ - --- - ---- -------------- ------ ---- ---- ------------ ------ - -------- - ---- ---------------------- ----- ------------- - ---- ----- - ------------ - ----- - ---- - ---- - - - - -- -------- ---------- - ----- - -------- ------ ---- - - ------------------------ -- --------- - ------ ------------ ---------- - -- ------- - --------------------- ------ ---------- ------- ------------- - ------ - ----- -------- ---- -------------- ---- ------------------------------- ---- -- -- - --- ---------------- ----- ---------------------------------------------------- ------------------ ------- ----- --- ----- ------ -- - ------ ------- ---------------------
在此代码中,使用用于 Next.js 的 Apollo 高阶组件的 withApollo
方法,在页面组件 HomePage
上注入了 Apollo 客户端(间接通过 useQuery
标记)。然后使用 useQuery
将 GraphQL 查询和 React 组件进行了绑定。
总结
GraphQL 是一种先进的 API 语言和运行时,用于更高效、更透明地创建更好的 API。Next.js 可使您使用 GraphQL 更轻松地获取数据并将其用于创建用户界面。随着您的 Next.js 应用程序的规模和复杂性的增加,使用 GraphQL 的好处将变得更加明显。上述指南包含了使用 GraphQL 和 Next.js 的基础知识,以及演示了如何加载和渲染 GraphQL 数据的示例代码。现在,通过这些知识来开始构建您的 Next.js 应用程序,从而加速开发和优化代码。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/65a491f6add4f0e0ffcdfcf1