从零到 GraphQL：实战指南
GraphQL 是一种新兴的 API 查询语言，它可以让前端开发者更加高效地与后端进行数据交互。在本篇文章中，我们将会深入探讨 GraphQL 的基本概念以及如何使用 GraphQL 构建一个完整的前端应用程序。
第一步：安装 GraphQL
在开始使用 GraphQL 之前，我们需要先安装它。你可以通过 npm 或者 yarn 来安装 GraphQL：
npm install graphql
或者
yarn add graphql
第二步：了解 GraphQL 的基本概念
在使用 GraphQL 之前，我们需要了解一些基本概念。GraphQL 由三个基本部分组成：
Schema：定义了所有可查询的类型和字段。
Query：用于从服务器获取数据的查询语句。
Mutation：用于修改服务器上数据的语句。
第三步：构建一个 GraphQL 服务器
现在，我们已经了解了 GraphQL 的基本概念，让我们来构建一个 GraphQL 服务器。在本例中，我们将使用 Node.js 和 Express，但是你也可以使用其他语言和框架。
首先，我们需要创建一个 Express 应用程序：
const express = require('express');
const app = express();接下来，我们需要创建一个 GraphQL 端点。我们将使用 Express 的中间件来处理 GraphQL 查询和突变：
-- -------------------- ---- -------
----- - ----------- - - ---------------------------
----- - ----------- - - -------------------
----- ------ - -------------
---- ----- -
------ ------
-
---
----- ---- - -
------ -- -- ------ -------
--
------------------- -------------
------- -------
---------- -----
--------- ----
----
---------------- -- -- ---------------- ------ -- --------------------------现在，我们已经创建了一个 GraphQL 端点，并可以通过浏览器访问它。当你在浏览器中输入 http://localhost:4000/graphql 时，你应该能够看到 GraphiQL 工具。
第四步：编写查询和突变
现在，我们已经创建了一个 GraphQL 服务器，让我们编写一些查询和突变。我们将创建一个简单的查询，用于获取“Hello World!”消息。在我们的 schema 中，我们定义了一个名为“hello”的查询类型：
const schema = buildSchema(`
type Query {
hello: String
}
`);我们还需要在 root 对象中定义一个“hello”函数，它将返回我们的消息：
const root = {
hello: () => 'Hello World!'
};现在，我们可以在 GraphiQL 工具中输入以下查询：
{
hello
}当我们按下“运行”按钮时，我们将获得以下响应：
{
"data": {
"hello": "Hello World!"
}
}现在，我们已经成功地从 GraphQL 服务器获取了数据。接下来，我们将创建一个突变，用于向服务器添加新数据。
在我们的 schema 中，我们定义了一个名为“createUser”的突变类型：
type Mutation {
createUser(name: String!, email: String!): User
}我们还需要在 root 对象中定义一个“createUser”函数，它将创建一个新的用户：
const root = {
hello: () => 'Hello World!',
createUser: ({ name, email }) => {
const user = { name, email };
// 在这里将用户添加到数据库中
return user;
}
};现在，我们可以在 GraphiQL 工具中输入以下突变：
mutation {
createUser(name: "John Doe", email: "john.doe@example.com") {
name
email
}
}当我们按下“运行”按钮时，我们将获得以下响应：
{
"data": {
"createUser": {
"name": "John Doe",
"email": "john.doe@example.com"
}
}
}现在，我们已经成功地使用 GraphQL 突变向服务器添加了新数据。
第五步：使用 GraphQL 客户端
现在，我们已经成功地创建了一个 GraphQL 服务器，并编写了一些查询和突变，让我们来看看如何在前端使用 GraphQL。我们将使用 React 和 Apollo 客户端来创建一个简单的前端应用程序。
首先，我们需要安装 Apollo 客户端：
npm install apollo-boost react-apollo graphql
或者
yarn add apollo-boost react-apollo graphql
接下来，我们需要创建一个 Apollo 客户端：
import ApolloClient from 'apollo-boost';
const client = new ApolloClient({
uri: 'http://localhost:4000/graphql'
});现在，我们已经创建了一个 Apollo 客户端，并可以使用它来发送查询和突变。
接下来，我们将编写一个简单的 React 组件，用于获取“Hello World!”消息。我们将使用 Apollo 的 useQuery 钩子来发送查询：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --- - ---- ---------------
------ - -------- - ---- ----------------------
----- --------- - ----
-
-----
-
--
-------- ------------ -
----- - -------- ------ ---- - - --------------------
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ --------------------
-
------ ------- -----------现在，我们已经成功地使用 Apollo 客户端从 GraphQL 服务器获取了数据。
接下来，我们将编写一个简单的 React 组件，用于向服务器添加新数据。我们将使用 Apollo 的 useMutation 钩子来发送突变：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - --- - ---- ---------------
------ - ----------- - ---- ----------------------
----- ----------- - ----
-------- ----------------- -------- ------- -------- -
---------------- ------ ------ ------- -
----
-----
-
-
--
-------- ------------ -
----- ------ -------- - -------------
----- ------- --------- - -------------
----- ------------ - -------- ----- -- - -------------------------
----- ------------ - - -- -
-------------------
------------ ---------- - ----- ----- - ---
------------
-------------
--
------ -
----- ------------------------
------
-----------
------------------
------------
----------- -- ------------------------
--
------
------------
-------------------
-------------
----------- -- -------------------------
--
------- ------------- -------------------
-------- - ------------ - ------- ------
---------
------ -- -------- -------
-------
--
-
------ ------- -----------现在，我们已经成功地使用 Apollo 客户端向服务器添加了新数据。
结论
在本篇文章中，我们深入探讨了 GraphQL 的基本概念，并使用 Node.js、Express、React 和 Apollo 客户端构建了一个完整的前端应用程序。通过学习本篇文章，你应该能够更加高效地与后端进行数据交互，并使用 GraphQL 构建更加可靠和可扩展的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6745bd6b21cbe992ea5fc574