use-dehydrated-state
v0.1.0
Published
A simple utility Hook for TanStack Query & Remix.
Downloads
26,329
Readme
use-dehydrated-state
use-dehydrated-state
is a simple utility Hook for TanStack Query & Remix.
Installation
NPM
npm install use-dehydrated-state
# or
pnpm add use-dehydrated-state
# or
yarn add use-dehydrated-state
Usage
To support caching queries on the server and set up hydration:
- Create a new
QueryClient
instance inside of your app, and on an instance ref (or in React state). This ensures that data is not shared between different users and requests, while still only creating the QueryClient once per component lifecycle. - Wrap your app component with
<QueryClientProvider>
and pass it the client instance - Wrap your app component with
<Hydrate>
and pass it thedehydratedState
prop fromuseDehydratedState()
// root.tsx
import { Outlet } from "@remix-run/react";
import {
Hydrate,
QueryClient,
QueryClientProvider,
} from "@tanstack/react-query";
import { useDehydratedState } from "use-dehydrated-state";
export default function MyApp() {
const [queryClient] = React.useState(() => new QueryClient());
const dehydratedState = useDehydratedState();
return (
<QueryClientProvider client={queryClient}>
<Hydrate state={dehydratedState}>
<Outlet />
</Hydrate>
</QueryClientProvider>
);
}
Now you are ready to prefetch some data in your loader
.
- Create a new
QueryClient
instance for each page request. This ensures that data is not shared between users and requests. - Prefetch the data using the clients
prefetchQuery
method and wait for it to complete - Use
dehydrate
to dehydrate the query cache and pass it to the page via thedehydratedState
prop. This is the same prop thatuseDehydratedState()
will pick up to cache in yourroot.tsx
// pages/invoices.tsx
import { json } from "@remix-run/node";
import { dehydrate, QueryClient, useQuery } from "@tanstack/react-query";
export async function loader() {
const queryClient = new QueryClient();
await queryClient.prefetchQuery(["invoices"], getInvoices);
return json({ dehydratedState: dehydrate(queryClient) });
}
export default function Invoices() {
const { data } = useQuery({ queryKey: ["invoices"], queryFn: getInvoices });
// ...
}