React Query
When export files to fe-sdk, we can generate React Query hooks through configured tsdk.config.js dataHookLib field to ReactQuery.
tsdk.config.js
module.exports = {
...
"dataHookLib": "ReactQuery"
}
Usage
Add use
as prefix to the method:
💡
Note: @/lib/user-api-hooks
and @/lib/user-api
seperate, because sometimes we only want use API
but not hooks in 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>
);
}