@mswjs/data 问题:为什么 RTK-Query 沙箱示例需要单独手写 POST 和 PUT 模拟?

@mswjs/data question: why does RTK-Query sandbox example need separately handcoded POST and PUT mocks?

这是一个关于@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 文档,因此我正在寻求建议以更好地理解为什么 toHandlers 在此示例中不适用于 PUT 和 POST。即,如果我删除 PUT 和 POST 模拟 API 调用,它们会失败。

手动 PUT 和 POST API 模拟有什么默认的 toHandlers 不做的?

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

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

如果删除显式 POST /posts 处理程序,添加 post 会失败,因为 post 的模型定义没有定义 [=16] 的初始值=]主键。您不能在不提供主键的情况下创建实体,示例中没有:

// 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 来创建新的 post。 id 主键的值将使用值 getter 生成——nanoid 函数。

即使您删除显式 PUT /posts/:id 请求处理程序,post 编辑操作也能正常运行,因为与 POST 处理程序不同,PUT 仅用于实施不稳定的错误行为(在路径参数中提供编辑的 post id:req.params.id)。