跳转到内容

10 分钟上手

安装

npm i @iostore/store @iostore/react react next

最小可复制示例

// app/users/page.tsx (Server Component)
import { createQueryClient } from '@iostore/store/query';
import { UsersClient } from './users-client';

export default async function UsersPage() {
  const client = createQueryClient();
  const query = client.defineQuery({
    key: ['users', 'acme'],
    queryFn: ({ signal }) =>
      fetch('https://example.com/api/users?tenant=acme', { signal }).then((r) => r.json()),
  });

  await query.prefetch();
  const initialUsers = query.getState().data;

  return <UsersClient initialUsers={initialUsers ?? []} />;
}

// app/users/users-client.tsx (Client Component)
'use client';

import { useQuery } from '@iostore/react';

export function UsersClient({ initialUsers }: { initialUsers: Array<{ id: string; name: string }> }) {
  const users = useQuery({
    key: ['users', 'acme'],
    queryFn: ({ signal }) => fetch('/api/users?tenant=acme', { signal }).then((r) => r.json()),
    placeholderData: initialUsers,
  });

  if (users.isLoading) return <p>Loading...</p>;
  if (users.error) return <p>{String(users.error)}</p>;
  return <pre>{JSON.stringify(users.data, null, 2)}</pre>;
}

状态分支渲染建议

首屏加载：使用 isLoading（或等价状态）。
后台刷新：使用 isFetching（或观察者 fetchStatus）。
错误态：直接展示可诊断信息，不要吞掉 error。

取消语义（AbortSignal）

queryFn 必须透传 signal 到 fetch / 请求客户端。
把取消当作控制流，不当作业务失败弹窗。
页面快速切换场景启用取消（cancelOnUnmount / cancelOnDispose / cancelOnUnsubscribe）。

复制后需要改的 3 处

把示例 key 改成业务域 key（例如 users -> orders）。
把请求 URL 与返回类型改成项目真实接口。
把重试、取消策略调成你的页面交互强度。

相关 API

下一步

导航