Jonathan
Jonathan7mo 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
Jonathan7mo ago
This was due to a mismatch in the react-query version on my project.
DevThoughts
DevThoughts7mo ago
@Jonathan What was the slutation? I am using "@trpc/react-query": "^10.38.5",
Jonathan
Jonathan7mo ago
The main thing is making sure you aren’t on the latest tanstack react query
More Posts
trpc mutation call stuckI have an issue with a simple mutation procedure: `getPublicUser: publicProcedure .input(z.objeCreate client based on OpenAPIHi! I am running a golang server with an openapi spec and would love to use trpc client in my fronteTRPC with react query, getting error twice?When i am try to show TRPC error in the client side with react-query, i am getting error twice from Error building create-t3-app: Page couldn't be rendered statically because it used `cookies`I get the following error when building create-t3-app: ``` TRPCClientError: Dynamic server usage: PaCompressing parts of query/mutation inputHi, I'm using trpc with the proxyclient for typesafety but recently hit an obstacle where some strin`useSuspenseQuery` still runs a fetch on SSR even when setting `ssr: false` in the api configBeside double-fetching, this causes issues during rendering if you have auth on your routes as the SUnsubscription callback triggering immediatelyHey! I am currently using Bun that's queried via a Vue application. For some reason the unsubscribeMultiple optimistic updates and old data from refetchesHi all, I'm new to tRPC and React Query and I'm just trying to get my head around what exactly I'm dPass headers when prefetching using helpersI dont see a way to pass headers and cookies with either fetch/prefetch methods from the ssr helper.I am getting a errors after starting a TRPC project with T3. "Unsafe return of an `any` typed value"It seems like something is off between Prisma and TRPC but I can't figure out why the type infrence