React Query 支持

当导出前端模块的时候，通过配置 tsdk.config.js 的 dataHookLib 字段为 ReactQuery，即可生成 ReactQuery 钩子。

tsdk.config.js

module.exports = {
  ...
  "dataHookLib": "ReactQuery"
}

如何使用

通过在原来的接口名称前加 use 即可导入：

💡

这里路径 @/lib/user-api-hooks 是为了和 @/lib/user-api 隔离开，避免 Next.js 服务端组件报错。

'use client';
 
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useGetHello, useUpdateHello, setQueryClient } from '@/lib/user-api-hooks';
 
const queryClient = new QueryClient();
setQueryClient(queryClient);
 
export default function Page() {
  return (
    <QueryClientProvider client={queryClient}>
      <HelloApp />
    </QueryClientProvider>
  );
}
 
function HelloApp() {
  const { data, refetch } = useGetHello({});
  const { mutateAsync } = useUpdateHello();
 
  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold">{data?.result}</h1>
      <button
        className="bg-indigo-500 rounded px-2 py-4 text-white"
        onClick={async () => {
          await mutateAsync({ payload: 'Hello tsdk!' });
          refetch();
        }}>
        Update to `Hello tsdk!`
      </button>
    </div>
  );
}

SWR 性能