Error: No QueryClient set, use QueryClientProvider to set one

The error is coming from this snippet

 const {
    data,
    isLoading,
    error,
    hasNextPage,
    isFetchingNextPage,
    fetchNextPage,
  } = api.products.getAllByPage.useInfiniteQuery(
    {
      cursor: page,
    },
    {
      getNextPageParam: (lastPage) => lastPage.nextPage,
      getPreviousPageParam: (page) => page.prevPage,
    }
  );

 const {
    data,
    isLoading,
    error,
    hasNextPage,
    isFetchingNextPage,
    fetchNextPage,
  } = api.products.getAllByPage.useInfiniteQuery(
    {
      cursor: page,
    },
    {
      getNextPageParam: (lastPage) => lastPage.nextPage,
      getPreviousPageParam: (page) => page.prevPage,
    }
  );

Where I try to fetch products by page. the products routers look as follows:

export const productsRouter = createTRPCRouter({
  getAll: publicProcedure.query(async () => {
    const { data } = await axios.get(`${baseUrl}/products/`);

    return data;
  }),

  getAllByPage: publicProcedure
    .input(z.object({ cursor: z.number().nullish() }))
    .query(async ({ input }) => {
      const { data } = await axios.get<{
        prevPage: number;
        currentPage: number;
        nextPage: number;
        totalPages: number;
        products: IProduct[];
      }>(`${baseUrl}/products/get-all-by-page/${input?.cursor ?? 1}`);

      if (!data) {
        throw new TRPCError({
          code: "NOT_FOUND",
          message: "Failed to fetch products!",
        });
      }

      return data;
    }),
});

export const productsRouter = createTRPCRouter({
  getAll: publicProcedure.query(async () => {
    const { data } = await axios.get(`${baseUrl}/products/`);

    return data;
  }),

  getAllByPage: publicProcedure
    .input(z.object({ cursor: z.number().nullish() }))
    .query(async ({ input }) => {
      const { data } = await axios.get<{
        prevPage: number;
        currentPage: number;
        nextPage: number;
        totalPages: number;
        products: IProduct[];
      }>(`${baseUrl}/products/get-all-by-page/${input?.cursor ?? 1}`);

      if (!data) {
        throw new TRPCError({
          code: "NOT_FOUND",
          message: "Failed to fetch products!",
        });
      }

      return data;
    }),
});

And Inside of my _app.tsx component I am returning this:

return (
    <QueryClientProvider client={queryClientRef.current} contextSharing={true}>
      {/* @ts-ignore */}
      <Hydrate state={pageProps.dehydratedState}>
        <ManagedUIContext>
          <>
            <DefaultSeo />
            <Layout pageProps={pageProps}>
              <Component {...pageProps} key={router.route} />
            </Layout>
            <ToastContainer />
            <ManagedModal />
            <ManagedDrawer />
          </>
        </ManagedUIContext>
      </Hydrate>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );

return (
    <QueryClientProvider client={queryClientRef.current} contextSharing={true}>
      {/* @ts-ignore */}
      <Hydrate state={pageProps.dehydratedState}>
        <ManagedUIContext>
          <>
            <DefaultSeo />
            <Layout pageProps={pageProps}>
              <Component {...pageProps} key={router.route} />
            </Layout>
            <ToastContainer />
            <ManagedModal />
            <ManagedDrawer />
          </>
        </ManagedUIContext>
      </Hydrate>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );

So I have indeed set QueryClientProvider and passed the QueryClient through.

7 Replies

kenny•13mo ago

these are the contents of my utils/api.ts

import { httpBatchLink, loggerLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";
import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
import superjson from "superjson";

import { type AppRouter } from "@server/api/root";

const getBaseUrl = () => {
  if (typeof window !== "undefined") return ""; // browser should use relative url
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
};

export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      transformer: superjson,
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
        }),
      ],
    };
  },
  ssr: false,
});

export type RouterInputs = inferRouterInputs<AppRouter>;
export type RouterOutputs = inferRouterOutputs<AppRouter>;

import { httpBatchLink, loggerLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";
import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
import superjson from "superjson";

import { type AppRouter } from "@server/api/root";

const getBaseUrl = () => {
  if (typeof window !== "undefined") return ""; // browser should use relative url
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
};

export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      transformer: superjson,
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
        }),
      ],
    };
  },
  ssr: false,
});

export type RouterInputs = inferRouterInputs<AppRouter>;
export type RouterOutputs = inferRouterOutputs<AppRouter>;

also, this application is part of a monorepo. which I have recently migrated to pnpm from npm. I wasn't getting this error when I was using npm.

kenny•13mo ago

This is the full error if it helps:

pwsh

pwsh

message.txt

kenny•13mo ago

This error is happening while generating the page

Finn•13mo ago

Remove the query client you manually added Should fix the issue Probbaly I'm on mobile so can't see the error And if it does you know what to Google to achieve what your Trying to achive

kenny•13mo ago

you mean the queryClientRef.current?

Finn•13mo ago

The component yes

kenny•13mo ago

I've checked almost 10 Stackoverflow question abt this xD and other sources I've tried removing QueryClientProvider I saw that I only get the error on /products and / page cuz... those pages use useInfiniteQuery all pages that fetch data using useInfiniteQuery give me this error. for example I don't get the error from /products/[slug] which used useQuery to get one product. This theory is busted now it's, when I navigate inside of the url instead of clicking on links that I get this error for example, I click on the link that gets me to /, I do not get the error. for me to be able to see the navbar tho, I have to navigate from the url to localhost:3000/about cuz no queries are being made in the about page pnpm i @tanstack/react-query That was the fix

Gaming

Programming

Error: No QueryClient set, use QueryClientProvider to set one