TTC
Theo's Typesafe Cult•2y ago
kenny

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
kennyOP•2y 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
kennyOP•2y ago
This is the full error if it helps: 
pwsh
pwsh

message.txt

kenny
kennyOP•2y ago
This error is happening while generating the page
Finn
Finn•2y 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
kennyOP•2y ago
you mean the queryClientRef.current?
Finn
Finn•2y ago
The component yes
kenny
kennyOP•2y 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
Want results from more Discord servers?
Add your server