@mswjs/data 问题：为啥 RTK-Query 沙箱示例需要单独手动编码 POST 和 PUT 模拟？

Posted 2023-02-21

【中文标题】@mswjs/data 问题：为啥 RTK-Query 沙箱示例需要单独手动编码 POST 和 PUT 模拟？

【英文标题】：@mswjs/data question: why does RTK-Query sandbox example need separately handcoded POST and PUT mocks?@mswjs/data 问题：为什么 RTK-Query 沙箱示例需要单独手动编码 POST 和 PUT 模拟？

【发布时间】：2022-01-15 07:06:28

【问题描述】：

这是一个关于 @mswjs/data.toHandlers 函数的默认行为的问题，该函数使用此示例与 @mswjs/data 为 RTK-Query 调用创建模拟。

https://codesandbox.io/s/github/reduxjs/redux-toolkit/tree/master/examples/query/react/mutations?from-embed

文件 src/mocks/db.ts 使用 @mswjs/data 创建一个模拟数据库，并使用 ...db.post.toHandlers('rest') 定义默认的 http 模拟响应，但如果我删除额外的 PUT 和 POST 模拟，则无法工作。

我的理解是，@mswjs/data toHandlers() 函数根据 github 文档默认为定义的数据库（在本例中为 Posts）提供 PUT 和 POST 模拟 API 调用，因此我正在寻求建议以更好地理解 toHandlers 的原因在此示例中不适用于 PUT 和 POST。即，如果我删除 PUT 和 POST 模拟 API 调用，它们会失败。

手动 PUT 和 POST API 模拟做了哪些默认 toHandlers 不做的事情？

【参考方案1】：

您说.toHandlers() 生成POST /posts 和PUT /posts/:id 请求处理程序是正确的。 RTK-Query 示例显式添加了这些处理程序，原因如下：

通过根据处理程序中的 Math.random() 值返回错误响应来模拟不稳定的错误行为。 将id 主键设置为nanoid()。

如果删除显式 POST /posts 处理程序，则添加帖子会失败，因为 post 的模型定义没有定义 id 主键的初始值。如果不向实体提供主键，则无法创建实体，示例中没有：

// PostManager.tsx
// The "post" state only contains the name of the new post.
const [post, setPost] = useState<Pick<Post, "name">>(initialValue);

// Only the "post" state is passed to the code that dispatches the
// "POST /posts" request handled by MSW.
await addPost(post).unwrap();

如果我们省略随机错误行为，我认为示例应该使用nanoid作为模型描述中id属性的初始值：

import  nanoid  from "@reduxjs/toolkit";

const db = factory(
  post: 
-   id: primaryKey(String),
+   id: primaryKey(nanoid),
    name: String
  
);

这样您就可以通过提供name 来创建新帖子。 id 主键的值将使用 value getter（nanoid 函数）生成。

即使您删除显式的PUT /posts/:id 请求处理程序，帖子编辑操作也能正常工作，因为与POST 处理程序不同，PUT 仅用于实现片状错误行为（提供已编辑的帖子ID在路径参数中：req.params.id)。