React-query persist client with typescript error

Question

I was trying to use the PersistQueryClientProvider, but it's throwing an error of type "declaring missing parameters on the queryClient". However, in the documentation, these parameters are stated as optional. Here are the errors:

Type 'QueryClient' is missing the following properties from type 'QueryClient': logger, mountCount, ensureQueryData, getLogger ts(2739)
QueryClientProvider.d.ts(12, 5): The expected type comes from property 'client' which is declared here on type 'IntrinsicAttributes & PersistQueryClientProviderProps'

and the code:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { AuthProvider } from "./context/AuthContext";
import { BrowserRouter } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "react-query"
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      cacheTime: 1000 * 60 * 60 * 24,
    },
  },
})

const persister = createSyncStoragePersister({
  storage: window.localStorage,
})

ReactDOM.render(
  <AuthProvider>
    <BrowserRouter>
      <PersistQueryClientProvider client={queryClient} persistOptions={{ persister }}>
        <App />
      </PersistQueryClientProvider>
    </BrowserRouter>
  </AuthProvider>,
  document.getElementById("root")
);

and for information the version of the packages:

{
  "name": "template-vite-react-ts-tailwind-v3",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@tanstack/query-sync-storage-persister": "^4.32.0",
    "@tanstack/react-query-persist-client": "^4.32.0",
    "axios": "^1.4.0",
    "framer-motion": "^10.13.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.45.2",
    "react-query": "^3.39.3",
    "react-router": "^6.14.2",
    "react-router-dom": "^6.14.2"
  },
  "devDependencies": {
    "@types/axios": "^0.14.0",
    "@types/react": "^17.0.33",
    "@types/react-dom": "^17.0.10",
    "@types/react-query": "^1.2.9",
    "@types/react-router": "^5.1.20",
    "@vitejs/plugin-react": "^1.0.7",
    "prettier": "^2.5.1",
    "prettier-plugin-tailwindcss": "^0.1.5",
    "typescript": "^4.4.4",
    "vitawind": "^2.2.4",
    "vite": "^2.7.2"
  }
}

Why is this error occurring? And how can I correct this?

Answer 1

The error message:

Type 'QueryClient' is missing the following properties from type 'QueryClient': logger, mountCount, ensureQueryData, getLogger ts(2739)
QueryClientProvider.d.ts(12, 5): The expected type comes from property 'client' which is declared here on type 'IntrinsicAttributes & PersistQueryClientProviderProps'

means that the QueryClient type required by PersistQueryClientProvider does not match the type of the query client created in:

const queryClient = new QueryClient({
  ...
})

This is because the QueryClient exported from "react-query" is an older version of the library (v3); the PersistQueryClientProvider requires the QueryClient from v4 of react-query.

To fix the error, you'll need to install v4 of react-query and use the QueryClient exported from there.

1. install v4 of react query:

npm i @tanstack/react-query

2. use the new QueryClient

Remove this line from your source: import { QueryClient, QueryClientProvider } from "react-query" and replace with:

...
import {
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'
...