如何在 RTK 查詢中的 POST 后導航到更新/詳細信息頁面

Question

我在 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 保存在 state 中（但我無法刷新）

Answer 1

這很簡單，但前提是您的 API 在 POST 響應中返回新創建的項目（這是 RESTfull API 所期望的）。 如果是這樣 - 只需等待鈎子的回答：

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

考慮到突變“觸發器”function 返回 Promise，您可以像往常一樣使用它：

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

Answer 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"]}`)