Hook

前置要求

• React 18+ 项目（或使用 Next.js / Remix 等现代框架）。
• 已配置 TypeScript 严格模式，确保类型推导正常。
• 建议搭配 Registry 提供的 UI 组件或 Items 能力一起使用。

安装示例：use-cancelable-swr

1. 阅读文档了解返回值与参数：/docs/ssp/(hook)/use-cancelable-swr
2. 下载 Hook：

npx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/use-cancelable-swr.json

yarn dlx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/use-cancelable-swr.json

pnpx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/use-cancelable-swr.json

bunx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/use-cancelable-swr.json

3. 确认本地生成的文件（默认位于 hooks/use-cancelable-swr.ts）。
4. 在组件中使用：

import { useCancelableSwr } from "@/hooks/use-cancelable-swr"

export function Products() {
  const [{ data, error, isLoading }, controller] = useCancelableSwr(
    { url: "/api/products", key: ["products"] },
    { method: "GET" }
  )

  if (isLoading) return <p>Loading…</p>
  if (error) return <p>Failed to load</p>

  return (
    <div>
      <button onClick={() => controller.abort()}>Abort</button>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  )
}

组合使用其他能力

• 某些 Hook（如 use-cancelable-swr）与 Items 能力（make-api-request）搭配时可获得更完整的数据流体验。
• 下载多个 Hook 时，请检查 index.json 的 dependencies 并安装所需 npm 包（例如 swr）。

调试建议

• 利用 Hook 返回的状态（如 controller、mutate）来控制请求和缓存。
• 如需类型提示，可查看 Hook 源码中导出的类型或 Zod Schema。

下一步

• 浏览其它 Hook 文档，例如 use-gh-repo 等数据层封装。
• 若在项目中扩展或优化 Hook，欢迎提交贡献回 Registry。