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:
This is my react.tsx
it is complaining at :
And this is my root layout:
What am I missing? The server side piece is working when querying from next.
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.
