第十三章：Single-Flight Mutations —— 一辆车把“修改 + 刷新”一起运回来

这是 SolidStart 很有辨识度的一点。

传统做法经常是：

text

1. 发 POST 修改数据
2. 成功后再发 GET 拉最新数据

两次请求。

而 SolidStart 在满足条件时，可以把这件事压成一次飞行：

action 运行在服务端
相关 query 已经预加载

这样 action 完成后，相关 query 会自动重验证，并把结果在同一个响应里流回客户端。

你可以把它理解成：

text

普通做法
货车 A：去仓库改库存
货车 B：再去仓库取最新库存牌

SolidStart single-flight
一辆专车：
先改库存
再顺手把最新库存牌带回来

示意代码：

tsx

import {
  action,
  query,
  createAsync,
  type RouteDefinition
} from "@solidjs/router";

const getProduct = query(async (id: string) => {
  "use server";
  return db.products.get(id);
}, "product");

const updateProduct = action(async (id: string, formData: FormData) => {
  "use server";
  const name = formData.get("name")?.toString() ?? "";
  await db.products.update(id, { name });
}, "updateProduct");

export const route = {
  preload: ({ params }) => getProduct(params.id)
} satisfies RouteDefinition;

export default function ProductPage(props: { params: { id: string } }) {
  const product = createAsync(() => getProduct(props.params.id));

  return (
    <form action={updateProduct.with(props.params.id)} method="post">
      <p>当前名称: {product()?.name}</p>
      <input name="name" placeholder="新名称" />
      <button>保存</button>
    </form>
  );
}