Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

use-dehydrated-state

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

use-dehydrated-state

A simple utility Hook for TanStack Query & Remix.

  • 0.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
5.6K
decreased by-26.25%
Maintainers
1
Weekly downloads
 
Created
Source

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 the dehydratedState prop from useDehydratedState()
// 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 the dehydratedState prop. This is the same prop that useDehydratedState() will pick up to cache in your root.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 });

  // ...
}

FAQs

Package last updated on 26 Nov 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc