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•9mo ago

This was due to a mismatch in the react-query version on my project.

DevThoughts•9mo ago

@Jonathan What was the slutation? I am using "@trpc/react-query": "^10.38.5",

Jonathan•9mo ago

The main thing is making sure you aren’t on the latest tanstack react query