ultisuite-client/lib/api/query-provider.tsx

"use client"

import { useState } from "react"
import { QueryClient } from "@tanstack/react-query"
import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client"
import { openDB, type IDBPDatabase } from "idb"
import type { PersistedClient, Persister } from "@tanstack/react-query-persist-client"

const DB_NAME = "ultimail-query-cache"
const STORE_NAME = "query-cache"

let dbPromise: Promise<IDBPDatabase> | null = null

function getDb() {
  if (!dbPromise) {
    dbPromise = openDB(DB_NAME, 1, {
      upgrade(db) {
        db.createObjectStore(STORE_NAME)
      },
    })
  }
  return dbPromise
}

const idbPersister: Persister = {
  persistClient: async (client: PersistedClient) => {
    const db = await getDb()
    await db.put(STORE_NAME, client, "cache")
  },
  restoreClient: async (): Promise<PersistedClient | undefined> => {
    const db = await getDb()
    return db.get(STORE_NAME, "cache")
  },
  removeClient: async () => {
    const db = await getDb()
    await db.delete(STORE_NAME, "cache")
  },
}

function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        gcTime: 1000 * 60 * 60 * 24,
        staleTime: 1000 * 60 * 5,
        networkMode: "offlineFirst",
        retry: 3,
      },
      mutations: {
        networkMode: "offlineFirst",
      },
    },
  })
}

export function QueryProvider({ children }: { children: React.ReactNode }) {
  const [queryClient] = useState(makeQueryClient)

  return (
    <PersistQueryClientProvider
      client={queryClient}
      persistOptions={{ persister: idbPersister }}
    >
      {children}
    </PersistQueryClientProvider>
  )
}