如何在 RTK 查询中进行 POST 后导航到更新/详细信息页面答案

【问题标题】：How to navigate to the update/detail page after a POST in RTK query如何在 RTK 查询中进行 POST 后导航到更新/详细信息页面
【发布时间】：2022-01-04 03:17:29
【问题描述】：

我在 REACT RTK 查询中有一个带有 POST 的表单，然后它应该导航到第二步，但为此我需要知道新创建记录的 id。 id 不是在 POST 中发送，而是在后端自动递增。我不想直接导航到列表视图以获取该 ID。

const [addMyModel] = useNewMyModelMutation();
const handleSubmit = (e: { preventDefault: () => void; }) => {
    e.preventDefault();
    const my_model = {
        "user_id": user_id, 
        "date_time_field": new Date(),
        "icm": icmChoice,
        ...
    };
    
    dispatch(setUniqueFilters(unique_filters))
    //localStorage.setItem('unique_filters', JSON.stringify(unique_filters))
    //localStorage.setItem('selection_positions', JSON.stringify(positions))
    //localStorage.setItem('my_model', JSON.stringify(my_model))
    addMyModel(my_model)
    push(`/icm/mymodels/list`) // push(`/icm/mymodels/${answer_question}`);

什么是最好的解决方案？

尝试在 POST (Django Rest Framework) 之后从后端发送 id 作为响应，
更改后端的主键，这样我就可以在 handleSubmit 之前知道 id（之前做过，但忘记了我设置所有内容的原因。）
将 step1 保存在 localStorage 中（但更新之前的记录会出现问题），
在状态下保存 step1（但我无法刷新）

【问题讨论】：

你见过react-query.tanstack.com/guides/updates-from-mutation-responses吗？如果是这样，任何不这样做的理由（项目符号列表中的第一个解决方案）。

标签： reactjs typescript post primary-key rtk-query

【解决方案1】：

这很简单，但前提是您的 API 在 POST 响应中返回新创建的项目（这是 RESTfull API 所期望的）。如果是这样 - 只需等待钩子的答案：

const data = await addMyModel(my_model).unwrap()
// id should be in `data`

考虑到突变“触发”函数返回一个 Promise，您可以照常使用它：

addMyModel(my_model).then(newItem => {
  if ("data" in newItem) {
    const expectedId = item.data.id;
    // use you expectedId
 }
});

【讨论】：

【解决方案2】：

const [addMyModel, result] = useNewMyModelMutation();
...
const handleSubmit = (e: any) => {
e.preventDefault();
const my_model = {
    "user_id": user_id, 
    "date_time_field": new Date(),
    "icm": icmChoice,
    ...
};
addMyModel(my_model)}

result.status === "fulfilled" && push(`/icm/mymodels/update/step2/${result.data["id"]}`)

【讨论】：