如何构建 GraphQL API？
近年来，GraphQL 已成为构建复杂 API 的热门选择。这是因为它消除了传统 REST API 的一些限制，使您的 API 更灵活、更高效。
在本文中，我们将讨论GraphQL 及其优缺点、GraphQL 关键术语，并将 GraphQL API 与 REST API 进行比较。此外，我们还将教您如何在Back4app上构建自己的 GraphQL API 并从Next.js前端连接到它。
Contents
GraphQL 简介
GraphQL是一种查询语言和服务器端运行时，用于开发应用程序编程接口（API）。利用 GraphQL，客户可以准确地指定他们需要从 API 中获取哪些数据，而不是依赖于后端提供一组固定的数据。
GraphQL 是一种现代高效的方法，可用于构建快速灵活的应用程序接口。它有一个内置的类型系统，并基于一个强类型模式，该模式定义了 API 中可用的数据。它支持实时更新和订阅，允许开发人员从多个数据源获取数据。此外，它还能让开发人员在不影响现有查询或突变的情况下废弃字段，从而轻松实现 API 的演进。
GraphQL 可以从项目一开始就使用，也可以集成到现有的 API 中。有些公司还将其与 REST 结合，然后逐步迁移。
它于 2012 年由 Facebook 内部开发，后于 2015 年开源。随着单页面应用程序（SPA）和移动应用程序的兴起，GraphQL 也越来越受欢迎。自发布以来，它已被GitHub、Airbnb、Pinterest 和 Shopify 等许多科技巨头所采用。
GraphQL 与 REST
GraphQL 和 REST 是构建网络应用程序接口的两种常用方法。
REST（表征状态传输）是一种描述网络结构的软件架构风格。它于 2000 年提出，十多年来一直是构建网络 API 的事实标准。它利用GET、POST、PUT、PATCH 和DELETE等 HTTP 方法来操作资源。每个资源都托管在其端点上（请看下图），每次我们请求资源时，都会返回整个 “数据集”。
这种架构带来了两个问题。第一个问题是抓取不足（获取的数据太少）和抓取过度（获取的数据太多）。此外，REST API 不允许我们订阅数据变化。
这就是 GraphQL 的用武之地。GraphQL 有一个单一的端点，允许我们在一个请求中从多个数据源查询数据。它允许我们准确定义所需的数据。此外，GraphQL 还允许我们订阅数据变化，而无需轮询服务器。它使我们的应用程序接口更具可预测性和自文档性。
归根结底，在 GraphQL 和 REST 之间做出选择取决于项目的具体要求。尽管 GraphQL 非常出色，但对于简单的项目来说，它可能会带来太多的复杂性。
常见 GraphQL 术语
让我们来看看使用 GraphQL 时可能会遇到的一些常用术语。
类型
GraphQL 有一个类型系统，是强类型的。它有一些内置标量类型，如Int、Float、String 和Boolean，但也允许定义自定义类型。
自定义类型可以这样定义：
type User {
username: String!
password: String!
friends: [User!]
}模式
模式是对 GraphQL API 中可用数据的描述。它包括对象类型、字段和相关数据类型、关系、查询、突变等。模式通常使用模式定义语言（SDL）来定义。
解析器
解析器是一种在 GraphQL 查询中检索特定字段数据的函数。解析器函数负责从数据源获取数据，并以预期格式返回。
查询
查询是对 GraphQL API 中数据的只读请求。您可以将查询视为 REST API 中的GET请求。
例如
query GetUser {
user(id: "Wfx8o2AZrE") {
id
username
fullName
}
}该查询将返回所有用户的列表。
突变
突变是在 GraphQL API 中操作数据的请求。您可以将突变视为 REST API 中的POST/PUT/PATCH/DELETE请求。突变还可以定义返回的数据。
例如
mutation CreateAuthor {
createAuthor(input: {fields: {firstName: "William", lastName: "Shakespeare"}}) {
author {
id
createdAt
}
}
}此突变会创建一个新作者，并返回作者的id和createdAt。
订阅
订阅是对 GraphQL API 实时更新的请求。订阅允许客户端在更新可用时立即接收更新，而无需轮询服务器。
例如
subscription OnPostCreate($postID: ID!) {
userAdded(postID: $postID) {
id
user
content
}
}创建新帖时会调用此订阅。
GraphQL 如何工作？
要实施 GraphQL API，您必须执行以下步骤：
- 使用模式描述数据
- 将解析器连接到数据源
- 编写查询和突变
- 获得可预测的结果
通过使用 Back4app 或类似服务，大部分工作将被抽象化。当您创建数据库模型时，Back4app 将自动生成 GraphQL 模式和文档。更多内容请参见本教程的实践部分。
GraphQL 有哪些优势？
GraphQL 简单易学，用户可以汇总来自多个来源的数据，而且是一种用于 API 的现代语言。
模式
GraphQL API 基于强类型模式。这样，您就可以在编译时而不是运行时发现类型错误和漏洞。此外，GraphQL API 是内省式的，这意味着它们可以提供有关自身的信息，而无需依赖任何外部文档。
灵活高效的数据提取
GraphQL 应用程序接口非常灵活，因为它允许客户准确地指定他们需要的内容。这就解决了抓取不足和抓取过度的问题，并减少了 API 请求的数量。更少的 API 请求会带来更好的性能。
API 更新
使用 GraphQL，您可以无缝集成新字段和类型，而不会影响当前查询。过时的字段也可以从工具中隐藏起来。GraphQL API 可让应用程序不断访问新功能，并鼓励开发更简洁、更可持续的服务器代码。
唯一的真理之源
GraphQL 模式为 GraphQL 应用程序设置了一个单一的真相来源。它为企业提供了管理整个应用程序接口的简便方法。
GraphQL 扩展
GraphQL 由一个庞大的 GraphQL 开发者社区提供支持，并带有许多开源扩展。这些扩展简化了一些常见的 API 任务，如分页、缓存、性能监控等。
GraphQL 有哪些缺点？
复杂性
GraphQL 将数据查询的大部分工作转移到服务器端，从而使后端变得更加复杂。此外，查询语言和模式定义可能需要更多的前期规划和维护。
学习曲线
GraphQL 的学习曲线比 REST 更陡峭。此外，GraphQL 开发人员通常比 REST 开发人员更昂贵、更难找。
缺乏标准化
GraphQL 的主要诟病之一是其实施缺乏标准化。REST API 有一套完善的原则和最佳实践，而 GraphQL 文档只提供了一些关于如何实施的一般提示。这可能会导致 GraphQL API 的设计和使用方式不一致和混乱。
安全
GraphQL 的好处是客户可以准确地请求他们所需的内容，但另一方面，这也可能带来潜在的安全风险。正确验证和消毒用户输入以防止恶意查询被执行非常重要。
如何构建 GraphQL API？
本节文章将介绍如何使用Back4app创建GraphQL API并从Next.js前端连接到该API。
先决条件
- 使用 JavaScript ES6 的经验
- 具有使用 React 和 Next.js 的经验
- 对 GraphQL 有基本了解
什么是 Back4app？
Back4app 是一个卓越的后台即服务（BaaS）解决方案，在开源软件之上运行。该平台提供广泛的功能，使用户能够更轻松、更快速地开发网络和移动应用程序。它使企业能够专注于业务逻辑，而无需担心后台或底层基础设施。
Back4app 配有一个易于使用、功能丰富的仪表板和一个命令行界面（CLI）。它还为 Node.js、Flutter、React Native、Android、Angular、iOS 等各种流行工具提供软件开发工具包（SDK）。
Back4app 采用简单明了的定价模式，可以满足任何应用程序的需求。他们还提供免费计划（无需信用卡），非常适合测试和原型设计。
想了解有关 Back4app 的更多信息？查看为什么使用 Back4app？
项目介绍
我们将构建一个简单的网络 TODO 应用程序。该应用程序将由两部分组成：后台和前台。后端将由 GraphQL API 支持，并部署在 Back4app 上。另一方面，前端将使用 Next.js 框架以 TypeScript 编写。为了将前端连接到后端，我们将使用Apollo 客户端。
最终的应用程序将是这样的
后台
创建 Back4app 应用程序
使用 Back4app 的第一步是创建应用程序。登录控制面板后，您可以查看当前应用程序的列表。要创建新应用程序，请点击 “创建新应用程序”。
由于我们正在构建 GraphQL API，因此请选择 “后端作为服务 “选项，并为应用程序指定一个唯一的名称。此外，选择 “NoSQL “作为数据库类型。
耐心等待 Back4app 配置应用程序所需的一切，包括数据库、应用层、扩展、备份和安全。
设置完成后，您将进入应用程序的控制面板。
定义数据库模型
由于我们正在构建一个简单的 TODO 应用程序，因此只需要一个数据库模型。
要开始操作，请进入 Back4app 面板，找到侧边栏中的 “数据库 “选项。从中选择 “创建类”，并将其命名为 “任务”。确保选择 “已启用公共读写”，然后点击 “创建类并添加列”。
包括后面的栏目：
+-----------+------------------+---------------+----------+
| Data type | Name | Default value | Required |
+-----------+------------------+---------------+----------+
| String | name | <leave blank> | yes |
+-----------+------------------+---------------+----------+
| String | description | <leave blank> | no |
+-----------+------------------+---------------+----------+
| Boolean | isDone | false | no |
+-----------+------------------+---------------+----------+创建数据库模型后，您会发现数据库自动添加了四列：
objectId是对象的主键updatedAt是上次更新的时间戳createdAt是创建的时间戳ACL定义了 “访问控制列表”。
请将它们牢记在心，因为我们在本教程稍后的 GraphQL 查询和突变中会用到它们。
要熟悉 Back4app 面板，请尝试添加两个示例任务，例如
+-----------------+----------------------------------------+--------+
| name | description | isDone |
+-----------------+----------------------------------------+--------+
| GraphQL backend | Create a GraphQL backend via Back4app. | false |
+-----------------+----------------------------------------+--------+
| Learn GraphQL | Learn the basics of GraphQL. | true |
+-----------------+----------------------------------------+--------+GraphQL API 控制台
通过 GraphQL API 控制台，我们可以在用代码实现 GraphQL 查询和突变之前对其进行测试。要访问控制台，请选择侧边栏上的 “API”，然后选择 “控制台 > GraphQL”。
该控制台非常易于使用。我们可以在左侧输入自定义查询和突变，然后在右侧显示结果。
要检查是否一切正常，请运行以下查询：
query CheckHealth {
health
}您将收到以下 JSON 响应：
{
"data": {
"health": true
}
}Back4app 的一大优势是它基于 Parse。当我们创建数据库模型时，Parse 会自动为我们配置 GraphQL。这包括生成 GraphQL 模式、文档等。
让我们试着列出数据库中的任务及其详细信息：
query GetTasks {
tasks {
count
edges {
node {
id
name
description
isDone
}
}
}
}你应该会得到类似的答复：
{
"data": {
"tasks": {
"count": 2,
"edges": [
{
"node": {
"id": "VGFzazpXQkJzSkRtV2xU",
"name": "GraphQL backend",
"description": "Create a GraphQL backend via Back4app.",
"isDone": false
}
},
{
"node": {
"id": "VGFzazpnM2lhNzdwUXBp",
"name": "Learn GraphQL",
"description": "Learn the basics of GraphQL.",
"isDone": true
}
}
]
}
}
}获取特定对象、创建对象、更新对象等操作也是类似的。我现在不会说得太详细，因为我将在本教程的稍后部分解释这些查询和突变。此外，Back4app 文档也很好地涵盖了这些主题：
后台部分到此为止。下一节，我们将开始前台的工作。
前端
创建下一个应用程序
引导 Next.js 项目的最简单方法是使用create-next-app实用程序。打开终端，运行以下命令
$ yarn create next-app
√ What is your project named? ... back4app-graphql
√ Would you like to use TypeScript with this project? ... No
√ Would you like to use ESLint with this project? ... Yes
√ Would you like to use the `src/` directory with this project? ... No
√ Would you like to use the experimental `app/` directory with this project? ... No
√ What import alias would you like configured? ... @/*
Successfully created a Next.js app.接下来，运行开发服务器：
$ yarn dev导航至http://localhost:3000，你应该会看到默认的 Next.js 登陆页面。
ChakraUI
为了加速和简化 UI/UX 构建过程，我们将使用ChakraUI。ChakraUI 是一个简单、模块化且易于访问的组件库，可为您提供构建 React 应用程序所需的一切。
如果遇到任何问题，请参阅ChakraUI：开始使用 Next.js。
要安装它，请运行
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion接下来，导航到_pages/app.tsx，然后用ChakraProvider对应用程序进行如下包装：
// pages/_app.tsx
import "../styles/globals.css";
import type {AppProps} from "next/app";
import {ChakraProvider} from "@chakra-ui/react";
export const theme = extendTheme({});
function MyApp({ Component, pageProps }: AppProps) {
return (
<ChakraProvider theme={theme}>
<Component {...pageProps} />
</ChakraProvider>
);
}
export default MyApp;不要忘记导入ChakraProvider：
import {ChakraProvider} from "@chakra-ui/provider";为避免随机颜色闪烁，请确保在内容之前加载颜色模式脚本。为此，您可以使用_document.js这样的脚本：
// pages/_document.tsx
import {ColorModeScript} from "@chakra-ui/react";
import { Html, Head, Main, NextScript } from "next/document";
import {theme} from "@/pages/_app";
export default function Document() {
return (
<Html lang='en'>
<Head />
<body>
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<Main />
<NextScript />
</body>
</Html>
);
}很好，您已成功安装 ChakraUI。
用户界面
接下来，让我们创建用户界面。我们的网络应用程序将有以下两个页面：
/显示任务列表创建/显示创建任务的表单
首先用以下内容替换pages/index.tsx：
// pages/index.tsx
import type {NextPage} from "next";
import {
Button, Card, CardBody, Container,
Heading, HStack, Stack, Text, VStack
} from "@chakra-ui/react";
import Link from "next/link";
let data = {
"tasks": {
"count": 2,
"edges": [
{
"node": {
"id": "VGFzazpXQkJzSkRtV2xU",
"name": "GraphQL backend",
"description": "Create a GraphQL backend via Back4app.",
"isDone": false
}
},
{
"node": {
"id": "VGFzazpnM2lhNzdwUXBp",
"name": "Learn GraphQL",
"description": "Learn the basics of GraphQL.",
"isDone": true
}
}
]
}
};
const ListPage: NextPage = () => {
const handleMarkAsDone = async (id: string, isDone: boolean) => {
console.log("TODO: mark task as done and refetch");
};
const handleDelete = async (id: string) => {
console.log("TODO: delete task and refetch");
};
return (
<>
<Container maxWidth="container.lg">
<HStack w="fill" justifyContent="space-between" mt={8} mb={4}>
<Heading as="h1" size="lg">back4app-graphql</Heading>
<Link href="/create">
<Button size="sm" colorScheme="blue">
Create task
</Button>
</Link>
</HStack>
<VStack spacing={4}>
{data.tasks.edges.map((edge) => {
let task = edge.node;
return (
<Card key={task.id} w="100%">
<CardBody>
<Stack direction="column">
<Heading as="h2" size="md">
{task.isDone ? "✔️" : "❌"}{" "}
{task.name}
</Heading>
<Text>
{task.description}
</Text>
<Stack direction="row" pt={2}>
<Button size="sm" colorScheme="blue" onClick={() => handleMarkAsDone(task.id, task.isDone)}>
Toggle done
</Button>
<Button size="sm" colorScheme="red" onClick={() => handleDelete(task.id)}>
Delete
</Button>
</Stack>
</Stack>
</CardBody>
</Card>
);
})}
</VStack>
</Container>
</>
);
};
export default ListPage;- 我们使用 ChakraUI 设计了用户界面。
- 当前任务是从名为
data的静态数组中加载的。 - 我们稍后将利用
handleMarkAsDone()和handleDelete()发送 GraphQL API 请求。
接下来，在页面文件夹中创建一个create.tsx文件，内容如下：
// pages/create.tsx
import type {NextPage} from "next";
import {
Button, Card, CardBody, CardHeader, Container, FormControl,
FormLabel, Heading, HStack, Input, Stack, Switch, Text
} from "@chakra-ui/react";
import Link from "next/link";
import {useState} from "react";
import {useRouter} from "next/router";
const CreatePage: NextPage = () => {
const router = useRouter();
const [name, setName] = useState("");
const [description, setDescription] = useState("");
const [isDone, setIsDone] = useState(false);
const [formError, setFormError] = useState("");
const handleSubmit = (event) => {
event.preventDefault();
if (!name || !description) {
setFormError("Please enter the title and the description.");
return;
}
console.log("TODO: call the GraphQL API and redirect");
};
return (
<>
<Container maxWidth="container.lg">
<HStack w="fill" justifyContent="space-between" mt={8} mb={4}>
<Heading as="h1" size="lg">back4app-graphql</Heading>
<Link href="/">
<Button size="sm" colorScheme="blue">
View list
</Button>
</Link>
</HStack>
<Card>
<CardHeader>
<Stack direction="column">
<Heading as="h2" size="md">Create task</Heading>
<Text>
Fill out the form and press "Create" to create a new task.
</Text>
</Stack>
</CardHeader>
<CardBody>
<form onSubmit={handleSubmit}>
<Stack direction="column">
{formError && <Text color="red.500" fontWeight="bold">{formError}</Text>}
<FormControl>
<FormLabel>Name</FormLabel>
<Input type="text" value={name} onChange={(event) => setName(event.target.value)}/>
</FormControl>
<FormControl>
<FormLabel>Description</FormLabel>
<Input type="text" value={description} onChange={(event) => setDescription(event.target.value)}/>
</FormControl>
<FormControl display="flex" alignItems="center">
<FormLabel mb="0">
Is done?
</FormLabel>
<Switch isChecked={isDone} onChange={() => setIsDone(!isDone)}/>
</FormControl>
<Button size="sm" colorScheme="blue" type="submit">Create task</Button>
</Stack>
</form>
</CardBody>
</Card>
</Container>
</>
);
};
export default CreatePage;- 我们再次使用 ChakraUI 组件来创建用户界面。
- 我们创建了一个 React 控制的表单，用于创建任务。
- 稍后将使用函数
handleSubmit()发送 API 请求。
重新启动网络服务器，访问网络应用程序http://localhost:3000。您应该会看到两个硬编码任务。接下来，点击 “创建任务 “查看任务创建表单。
GraphQL 客户端
要从前端连接到 GraphQL API，首先需要安装一个 GraphQL 客户端。我建议您使用Apollo 客户端，因为它易于设置、无主导性，而且不需要太多模板。
首先安装@apollo/client和graphql：
$ yarn add @apollo/client graphql要初始化客户端，您需要提供 Back4app API 凭据。获取凭据的最简单方法是导航到 GraphQL 控制台，并注意标题。
由于不想在源代码中公开 API 密钥，因此请在项目根目录下创建一个.env.local文件，内容如下：
# .env.local
NEXT_PUBLIC_PARSE_APPLICATION_ID=<YOUR_PARSE_APP_ID>
NEXT_PUBLIC_PARSE_MASTER_KEY=<YOUR_PARSE_MASTER_KEY>
NEXT_PUBLIC_PARSE_CLIENT_KEY=<YOUR_PARSE_CLIENT_KEY>接下来，导航至pages/_app.tsx，初始化 Apollo 客户端，然后用ApolloProvider对应用程序进行如下封装：
// pages/_app.tsx
// ...
import {ApolloClient, ApolloProvider, InMemoryCache} from "@apollo/client";
const client = new ApolloClient({
uri: "https://parseapi.back4app.com/graphql",
headers: {
"X-Parse-Application-Id": process.env.NEXT_PUBLIC_PARSE_APPLICATION_ID,
"X-Parse-Master-Key": process.env.NEXT_PUBLIC_PARSE_MASTER_KEY,
"X-Parse-Client-Key": process.env.NEXT_PUBLIC_PARSE_CLIENT_KEY,
},
cache: new InMemoryCache(),
});
function MyApp({ Component, pageProps }: AppProps) {
return (
<ChakraProvider theme={theme}>
<ApolloProvider client={client}>
<Component {...pageProps} />
</ApolloProvider>
</ChakraProvider>
);
}等待前台重新编译，然后访问网络应用，检查控制台是否有错误。没有错误意味着连接成功。
GraphQL 查询和突变
最后要做的是定义 GraphQL 查询和突变，然后从 React 代码中调用它们。
要在集成开发环境中启用 GraphQL 代码辅助功能，请访问 Back4app GraphQL 控制台，选择侧边栏上的 “Schema”，并将其下载为 SDL。然后在项目根目录下创建一个名为schema.graphql的新文件，并粘贴 SDL 内容。
首先，浏览pages/index.tsx，在导入后添加以下查询：
// pages/index.tsx
const GET_TASKS = gql`
query GetTasks {
tasks {
count
edges {
node {
id
name
description
isDone
}
}
}
}
`;
const UPDATE_TASK = gql`
mutation UpdateTask($id: ID!, $isDone: Boolean!) {
updateTask(input: { id: $id, fields: { isDone: $isDone } }) {
task {
isDone
updatedAt
}
}
}
`;
const DELETE_TASK = gql`
mutation DeleteTask($id: ID!) {
deleteTask(input: { id: $id }) {
task {
id
}
}
}
`;这三个查询很容易理解。第一个查询返回所有任务的列表，第二个查询更新特定任务的isDone属性，第三个查询删除特定任务。
接下来，像这样修改ListPage的顶部：
// pages_index.tsx
// ...
const ListPage: NextPage = () => {
const {loading, error, data, refetch} = useQuery(GET_TASKS);
const [deleteTask] = useMutation(DELETE_TASK);
const [updateTask] = useMutation(UPDATE_TASK);
const handleMarkAsDone = async (id: string, isDone: boolean) => {
try {
const updateTaskResponse = await updateTask({
variables: {id: id, isDone: !isDone}
});
console.debug(updateTaskResponse);
refetch();
} catch (error) {
console.error(error);
}
};
const handleDelete = async (id: string) => {
try {
const deleteTaskResponse = await deleteTask({
variables: {id: id},
});
console.debug(deleteTaskResponse);
refetch();
} catch (error) {
console.error(error);
}
};
if (error) return <p>Oops, something went wrong.</p>;
if (loading) return <Spinner/>;
// ...
};
export default ListPage;- 我们使用
useQuery()来执行GET_TASKS查询并存储结果。 - 我们使用
useMutation()来定义 GraphQL 突变。 - 我们更新了
handleMarkAsDone()和handleDelete()以使用突变钩子。
继续以类似方式修改pages/create.tsx：
const CREATE_TASK = gql`
mutation CreateTask($name: String!, $description: String, $isDone: Boolean!) {
createTask(
input: {
fields: { name: $name, description: $description, isDone: $isDone }
}
) {
task {
id
}
}
}
`;
const CreatePage: NextPage = () => {
// ...
const [createTask] = useMutation(CREATE_TASK);
const handleSubmit = (event) => {
event.preventDefault();
if (!name || !description) {
setFormError("Please enter the title and the description.");
return;
}
createTask({
variables: {name: name, description: description, isDone: isDone}
}).then(response => {
router.push("/");
});
};
// ...
};
export default CreatePage;别忘了进口：
import {gql, useMutation, useQuery} from "@apollo/client";很好，就是这样！
重新启动开发服务器并访问网络应用程序。检查任务是否已从数据库加载，尝试创建一个新任务，将其标记为已完成，然后将其删除。
结论
总之，GraphQL 具有灵活的查询功能和高效的数据检索能力，是构建复杂 API 的不错选择。与传统的 REST API 相比，GraphQL 有很多优点，但在启动项目时，也有一些缺点需要考虑。
在本文中，我们讨论了 GraphQL 的优缺点，将其与 REST API 进行了比较，并介绍了一些关键的 GraphQL 术语。现在，您应该能够在 Back4app 上构建自己的简单 GraphQL API，并从 JavaScript 前端连接到它。
您可以从GitHub 代码库中获取最终源代码。
常见问题
什麼是 GraphQL？
GraphQL 是一種查詢語言及伺服器端執行環境，用於開發強大且靈活的 API。
REST 和 GraphQL 的主要差異是什麼？
REST 是建立網頁服務的標準且簡單的方法，而 GraphQL 則提供更靈活的查詢功能，並消除了資料過多或過少的問題。
GraphQL 常見術語有哪些？
– Schema（結構） 是對 GraphQL API 可用資料的描述。
– Resolver（解析器） 是用來取得某個查詢欄位資料的函式。
– Query（查詢） 是對 GraphQL API 的唯讀資料請求。
– Mutation（變更） 是用於修改 GraphQL API 中資料的請求。
– Subscription（訂閱） 是從 GraphQL API 接收即時更新的請求。
如何建立 GraphQL API？
1. 在 Back4app 建立免費帳號。
2. 設計資料庫模型。
3. 透過 Back4app GraphQL API 控制台撰寫查詢與變更操作。
4. 在前端專案中安裝 GraphQL 用戶端（如 Apollo 或 Relay）。
5. 初始化用戶端並連接至 GraphQL API。
