1. 什么是 wp-graphql
wp-graphql 是一款 WordPress 插件，可将 WordPress 的内容生成 GraphQL API。同时，它还是一个 npm 包，可以用于在前端构建 WordPress 站点时使用 GraphQL。
使用 wp-graphql，您可以以一种更现代化的方式访问 WordPress 内容，避免使用传统路由和后端渲染的瓶颈，使您的应用程序更快、更可靠。
2. 安装 wp-graphql
在您的 WordPress 安装中安装 wp-graphql 插件后，您还需要通过 npm 安装 @wp-gql/graphql-request。
npm install --save @wp-gql/graphql-request
3. 用法
3.1 初始化
在使用 wp-graphql 之前，您需要先初始化 GraphQL 客户端。首先，您需要导入 GraphQLClient 类。
import { GraphQLClient } from '@wp-gql/graphql-request';在初始化 GraphQLClient 之前，您需要为其提供 GraphQL API 的端点和可选的身份验证令牌。
const endpoint = '<YOUR_SITE_URL>/graphql';
const token = '<YOUR_TOKEN>' || '';
const client = new GraphQLClient(endpoint, {
headers: {
Authorization: `Bearer ${token}`,
},
});3.2 发送查询
在 wp-graphql 中，查询是通过发送 GraphQL 请求来实现的。您可以使用 client.request 方法将请求发送到 REST API 中。
-- -------------------- ---- -------
----- ----- - -
----- -
----- -
----- -
-----
-------
-
-
-
--
------------------------------- -- -
------------------
---3.3 发送变异
wp-graphql 还支持发送修改 API 数据的 GraphQL 变异。您可以使用 client.request 方法将请求发送到 POST API 中。
-- -------------------- ---- -------
----- -------- - -
-------- -
----------------- -
------ ------ --------
-------- ----- -- -- ----- -------
------- ---------
-- -
---- -
--
-
-
-
--
---------------------------------- -- -
------------------
---4. 示例代码
下面是一个具有基本查询和变异功能的示例代码。
-- -------------------- ---- -------
------ - ------------- - ---- --------------------------
----- -------- - --------------------------
----- ----- - -------------- -- ---
----- ------ - --- ----------------------- -
-------- -
-------------- ------- ----------
--
---
----- ----- - -
----- -
----- -
----- -
-----
-------
-
-
-
--
------------------------------- -- -
------------------
---
----- -------- - -
-------- -
----------------- -
------ ------ --------
-------- ----- -- -- ----- -------
------- ---------
-- -
---- -
--
-
-
-
--
---------------------------------- -- -
------------------
---5. 总结
wp-graphql 可以帮助您以现代化的方式访问 WordPress 内容。使用 wp-graphql，您可以轻松地发送查询和变异以修改 WordPress 内容，从而更好地满足前端应用程序的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005551281e8991b448d246d