全书目录

第四十篇：SolidStart 完全指南 —— 精细反应街区宇宙

第七章：Resources —— 街区里的异步补给车

2 分钟 527 字 第 777 / 962 个阅读单元

同步状态很好理解，难的是异步数据。

比如一条街区的“今日订单数”要从服务器拿。 这时候就轮到 resource。

#1. createResource：Solid 核心异步原语

tsx
import { createSignal, createResource, Show } from "solid-js";

async function fetchShop(id: string) {
  const res = await fetch(`/api/shops/${id}`);
  return res.json();
}

function ShopDetail() {
  const [shopId, setShopId] = createSignal("1");
  const [shop] = createResource(shopId, fetchShop);

  return (
    <div>
      <button onClick={() => setShopId("2")}>切换到 2 号店</button>

      <Show when={!shop.loading} fallback={<p>店铺信息装货中...</p>}>
        <p>店名: {shop()?.name}</p>
      </Show>
    </div>
  );
}

你可以把它看成：

text
shopId 变化
   ↓
createResource 触发异步补给车
   ↓
loading / error / data 状态自动联动
   ↓
UI 跟着更新

#2. createResource 适合什么

更适合：

  • 组件内异步状态
  • 不一定绑定路由的数据
  • 你要自己控制 fetcher 行为

#3. 到了 SolidStart，常见主流写法是 query + createAsync

官方文档里，针对路由数据，当前更推荐的组合通常是：

  • query(...) 负责可缓存、可重验证的数据读取
  • createAsync(...) 负责把它接进组件
tsx
import { query, createAsync } from "@solidjs/router";

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

export default function ShopPage(props: { params: { id: string } }) {
  const shop = createAsync(() => getShop(props.params.id));

  return <h1>{shop()?.name}</h1>;
}

#4. createResource 和 createAsync 怎么选

场景 更适合
普通 Solid 组件内异步状态 createResource
路由级数据、缓存、预加载、重验证 query + createAsync
需要和表单 mutation 自动联动 query + action + createAsync

一句话记住：

createResource 是异步原语，createAsync 是 SolidStart/Solid Router 语境里更顺手的路由数据接口。