使用 GraphQL 进行 CRUD 操作-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种用于 API 的查询语言，它允许客户端提出特定的数据需求并返回恰好符合请求的数据。在前端开发中，GraphQL 的出现大大改善了数据通信的方式，更好地满足了前端开发过程中对数据交互和查询的需求。本文将介绍如何使用 GraphQL 实现常见的 CRUD 操作。

安装 GraphQL

首先，需要使用 npm 命令安装 GraphQL：

npm install graphql

初始化 GraphQL

下面是一个简单的 GraphQL 初始化文件及其导出的查询和类型：

-- -------------------- ---- -------
----- - ----------- - - -------------------

----- ------ - -------------
  ---- ----- -
    ------ ------
  -
---

----- --------- - -
  ------ -- -- ------ -------
--

-------------- - -
  -------
  ---------
--

在这段代码中，我们创建了一个查询函数 hello，并将其作为 rootValue 导出，在查询时将返回字符串 "Hello World!"。

创建模型

接下来我们将创建一个模型，并使用该模型来实现 GraphQL 的所有 CRUD 操作。下面是模型的定义：

-- -------------------- ---- -------
----- ---- - -
  - --- -- ----- -------- ------ --- --
  - --- -- ----- --------- ------ --- --
  - --- -- ----- --------- ------ --- --
--

----- ------- -
  --------------- ------ ------- -
    ----- ---- - -------------- -- ------- --- ----
    ------- - ---
    --------- - ---- -- ----------
    ---------- - ----- -- -----------
  -
-

----- ---------- - -- ----- ----- -- -- -
  ----- -- - ----------- - --
  ----- ---------- - --- ----------- - ----- ----- ---
  ----------------------
  ------ -----------
--

----- ---------- - ------ -- -
  ------ --- ----------- ----
--

----- ------------- - ----- ----- ------- -- -
  ----- ----- - ------------------- -- ------- --- ----
  -- ------ --- --- -
    ----- -------------- - -
      ---
      ----- ---- -- -----------------
      ------ ----- -- -----------------
    --
    ------------------ -- ----------------
    ------ ---------------
  -
  ------ -----
--

----- ------------- - ------ -- -
  ----- ----- - ------------------- -- ------- --- ----
  -- ------ --- --- -
    ----- -------------- - ------------
    ------------------ ---
    ------ ---------------
  -
  ------ -----
--

-------------- - - -------- ----------- ----------- -------------- ------------- --

我们定义了 Product 类，其中包含 id、name 和 price 字段。在模型中，我们还实现了 addProduct、getProduct、updateProduct 和 deleteProduct 四个函数来实现增删改查操作。

实现 GraphQL 查询

在 schema 文件中，我们定义查询模式以及模式字段名称：

type Query {
  getProduct(id: Int!): Product
  getAllProducts: [Product]
}

在 rootValue 文件中，我们实现刚刚所定义的查询：

const { getProduct, getAllProducts } = require('./models/Product');

const rootValue = {
  getProduct: ({ id }) => getProduct({ id }),
  getAllProducts: () => getAllProducts(),
};

定义了查询内容之后，我们就可以使用 GraphQL 查询接口了：

-- -------------------- ---- -------
----- -
  -------------- -- -
    --
    ----
    -----
  -
  -------------- -
    --
    ----
    -----
  -
-

实现 GraphQL 增删改操作

在 schema 文件中，我们定义添加、修改和删除模式字段名称：

type Mutation {
  addProduct(name: String!, price: Float!): Product
  updateProduct(id: Int!, name: String, price: Float): Product
  deleteProduct(id: Int!): Product
}

在 rootValue 文件中，我们实现刚刚所定义的增删改操作：

const { addProduct, updateProduct, deleteProduct } = require('./models/Product');

const rootValue = {
  addProduct: ({ name, price }) => addProduct({ name, price }),
  updateProduct: ({ id, name, price }) => updateProduct({ id, name, price }),
  deleteProduct: ({ id }) => deleteProduct({ id })
};

使用 GraphQL 进行增删改操作，可以像这样：

-- -------------------- ---- -------
-------- -
  ---------------- ------- ------ ---- -
    --
    ----
    -----
  -
  ----------------- -- ----- ---- ------ ------ ----- -
    --
    ----
    -----
  -
  ----------------- -- -
    --
    ----
    -----
  -
-

总结

通过使用 GraphQL，我们可以在前端开发中更加便捷地进行数据交互和查询。本文介绍了如何使用 GraphQL 进行 CRUD 操作，掌握了这些基础的操作后，你就可以更好地利用 GraphQL 让你的前端开发变得更加高效和简洁。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/645b3107968c7c53b0d8c76d