Jonathan
Jonathan11mo ago

Type 'QueryClient' is missing the following properties from type 'QueryClient': queryCache, mutation

I am trying to setup a new project and doing my first client side query and getting this error:
Type 'QueryClient' is missing the following properties from type 'QueryClient': queryCache, mutationCache, logger, defaultOptions, and 4 more.
Type 'QueryClient' is missing the following properties from type 'QueryClient': queryCache, mutationCache, logger, defaultOptions, and 4 more.
This is my react.tsx
"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
import { createTRPCReact } from "@trpc/react-query";
import { useState } from "react";


import { getUrl, transformer } from "./shared";
import { type AppRouter } from "@/server/api/root";

export const api = createTRPCReact<AppRouter>();

export function TRPCReactProvider(props: {
children: React.ReactNode;
cookies: string;
}) {
const [queryClient] = useState(() => new QueryClient());

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(),
headers() {
return {
cookie: props.cookies,
"x-trpc-source": "react",
};
},
}),
],
})
);

return (
<QueryClientProvider client={queryClient}>
<api.Provider client={trpcClient} queryClient={queryClient}>
{props.children}
</api.Provider>
</QueryClientProvider>
);
}
"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
import { createTRPCReact } from "@trpc/react-query";
import { useState } from "react";


import { getUrl, transformer } from "./shared";
import { type AppRouter } from "@/server/api/root";

export const api = createTRPCReact<AppRouter>();

export function TRPCReactProvider(props: {
children: React.ReactNode;
cookies: string;
}) {
const [queryClient] = useState(() => new QueryClient());

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(),
headers() {
return {
cookie: props.cookies,
"x-trpc-source": "react",
};
},
}),
],
})
);

return (
<QueryClientProvider client={queryClient}>
<api.Provider client={trpcClient} queryClient={queryClient}>
{props.children}
</api.Provider>
</QueryClientProvider>
);
}
it is complaining at :
<api.Provider client={trpcClient} queryClient={queryClient}>
<api.Provider client={trpcClient} queryClient={queryClient}>
And this is my root layout:
import "./globals.css";
import type { Metadata } from "next";
import FlowbiteContext from "@/app/context/FlowbiteContext";
import Header from "@/components/header/header";
import { GetUser } from "@/utils/GetUser";
import { Inter } from "next/font/google";
import { cookies } from "next/headers";
import { TRPCReactProvider } from "@/trpc/react";


export const metadata: Metadata = {
title: "MyApp",
};

const inter = Inter({ subsets: ["latin"] });

export default async function DefaultLayout({
children,
}: {
children: React.ReactNode;
}) {
const user = await GetUser(cookies());

return (
<html lang="en bg-gray-100">
<body className={inter.className + ' bg-gray-100'}>
<TRPCReactProvider cookies={cookies().toString()}>
<FlowbiteContext>
<Header user={user} />
{children}
</FlowbiteContext>
</TRPCReactProvider>
</body>
</html>
);
}
import "./globals.css";
import type { Metadata } from "next";
import FlowbiteContext from "@/app/context/FlowbiteContext";
import Header from "@/components/header/header";
import { GetUser } from "@/utils/GetUser";
import { Inter } from "next/font/google";
import { cookies } from "next/headers";
import { TRPCReactProvider } from "@/trpc/react";


export const metadata: Metadata = {
title: "MyApp",
};

const inter = Inter({ subsets: ["latin"] });

export default async function DefaultLayout({
children,
}: {
children: React.ReactNode;
}) {
const user = await GetUser(cookies());

return (
<html lang="en bg-gray-100">
<body className={inter.className + ' bg-gray-100'}>
<TRPCReactProvider cookies={cookies().toString()}>
<FlowbiteContext>
<Header user={user} />
{children}
</FlowbiteContext>
</TRPCReactProvider>
</body>
</html>
);
}
What am I missing? The server side piece is working when querying from next.
Solution:
This was due to a mismatch in the react-query version on my project.
Jump to solution
3 Replies
Solution
Jonathan
Jonathan11mo ago
This was due to a mismatch in the react-query version on my project.
DevThoughts
DevThoughts11mo ago
@Jonathan What was the slutation? I am using "@trpc/react-query": "^10.38.5",
Jonathan
Jonathan11mo ago
The main thing is making sure you aren’t on the latest tanstack react query