persistedQueries & indexedDb
Would like to know if someone else has tried out the feature and/if got it work, I'm trying to recreate the Linear's approach to it's snappy feel and all-data-ready on initial page loads.
This is the current implementation I have following the RTK docs
// IDB custom persister
import { type PersistedClient, type Persister } from "@tanstack/react-query-persist-client";
import { del, get, set } from "idb-keyval";
/**
* Creates an Indexed DB persister
* @see https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
*/
export function createIDBPersister(idbValidKey: IDBValidKey = "reactQuery") {
return {
persistClient: async (client: PersistedClient) => {
await set(idbValidKey, client);
},
restoreClient: async () => {
return await get<PersistedClient>(idbValidKey);
},
removeClient: async () => {
await del(idbValidKey);
},
} as Persister;
}
// IDB custom persister
import { type PersistedClient, type Persister } from "@tanstack/react-query-persist-client";
import { del, get, set } from "idb-keyval";
/**
* Creates an Indexed DB persister
* @see https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
*/
export function createIDBPersister(idbValidKey: IDBValidKey = "reactQuery") {
return {
persistClient: async (client: PersistedClient) => {
await set(idbValidKey, client);
},
restoreClient: async () => {
return await get<PersistedClient>(idbValidKey);
},
removeClient: async () => {
await del(idbValidKey);
},
} as Persister;
}
1 Reply
// react.tsx file created by the t3-app scaffolder and modified to include the persister
"use client";
import { QueryClient } from "@tanstack/react-query";
import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
import { createTRPCReact } from "@trpc/react-query";
import { useState } from "react";
import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
import { type AppRouter } from "~/server/api/root";
import { createIDBPersister } from "./persister";
import { getUrl, transformer } from "./shared";
export const api = createTRPCReact<AppRouter>();
const persister = createIDBPersister();
export function TRPCReactProvider(props: { children: React.ReactNode }) {
const [queryClient] = useState(
() =>
new QueryClient({
defaultOptions: {
queries: {
cacheTime: 1000 * 60 * 60 * 5,
},
},
}),
);
const [trpcClient] = useState(() =>
api.createClient({
transformer,
links: [
loggerLink({
enabled: (op) =>
process.env.NODE_ENV === "development" ||
(op.direction === "down" && op.result instanceof Error),
}),
unstable_httpBatchStreamLink({
url: getUrl(),
}),
],
}),
);
return (
<PersistQueryClientProvider
client={queryClient}
persistOptions={{ persister, maxAge: 1000 * 60 * 60 * 4, buster: "persisted-indexed-db" }}
>
<api.Provider client={trpcClient} queryClient={queryClient}>
{props.children}
</api.Provider>
</PersistQueryClientProvider>
);
}
// react.tsx file created by the t3-app scaffolder and modified to include the persister
"use client";
import { QueryClient } from "@tanstack/react-query";
import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
import { createTRPCReact } from "@trpc/react-query";
import { useState } from "react";
import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
import { type AppRouter } from "~/server/api/root";
import { createIDBPersister } from "./persister";
import { getUrl, transformer } from "./shared";
export const api = createTRPCReact<AppRouter>();
const persister = createIDBPersister();
export function TRPCReactProvider(props: { children: React.ReactNode }) {
const [queryClient] = useState(
() =>
new QueryClient({
defaultOptions: {
queries: {
cacheTime: 1000 * 60 * 60 * 5,
},
},
}),
);
const [trpcClient] = useState(() =>
api.createClient({
transformer,
links: [
loggerLink({
enabled: (op) =>
process.env.NODE_ENV === "development" ||
(op.direction === "down" && op.result instanceof Error),
}),
unstable_httpBatchStreamLink({
url: getUrl(),
}),
],
}),
);
return (
<PersistQueryClientProvider
client={queryClient}
persistOptions={{ persister, maxAge: 1000 * 60 * 60 * 4, buster: "persisted-indexed-db" }}
>
<api.Provider client={trpcClient} queryClient={queryClient}>
{props.children}
</api.Provider>
</PersistQueryClientProvider>
);
}