Error: No QueryClient set, use QueryClientProvider to set one


I have wrapped my _app.tsx properly and I have made useQuery functionality possible, however on this specific component it just won't work. pages/room/[slug].tsx:

import type { GetStaticProps, NextPage } from "next";
import styled from "styled-components";
import Layout from "~/components/Layout/Layout";
import Head from "next/head";
import { api } from "~/utils/api";
import { generateHelpers } from "~/server/helpers/ssgHelper";
import { useRouter } from "next/router";

const Room: NextPage = () => {
  const router = useRouter();
  const slug = router.query.slug as string;

  const { data, isLoading } = api.rooms.getBySlug.useQuery({

  if (isLoading) {
    return <div>Loading...</div>;

  if (!data) {
    return <div>404</div>;

  if (data && data.name === "") {
    return null;

  return (
        <div>Hello from room {`${data.name}`}</div>

export const getStaticProps: GetStaticProps = async (context) => {
  const ssg = generateHelpers();

  const slug = context.params?.slug;

  if (typeof slug !== "string") throw new Error("no slug");

  await ssg.rooms.getBySlug.prefetch({ slug });

  return {
    props: {
      trpcState: ssg.dehydrate(),

export const getStaticPaths = () => {
  return { paths: [], fallback: "blocking" };

export default Room;

The error in particular looks like:
Adding this as a dependency resolved the issue inside package.json: "@tanstack/react-query": "^4.20.4",
oh my, thank you! this has cost me hours, because google can't reach discord 😅

is this something that is in the docs? that you need to install @tanstack/react-query?
because for me it worked if I first render the page in dev mode, then add the imprort of utils/trpc. but as soon as i refreshed, the whole app crashed
Yes it’s in the install command and documented as an integration with react-query, we don’t ship that library because that would cause problems https://trpc.io/docs/reactjs/setup
Yeah, I've seen it now. Thank you. Altough the described behaviour is still strange, since it works until the hard refresh. But I guess that's just some unfortunate edge case.
I've been using the Next.js integration btw.

Looking for more? Join the community!

Recommended Posts
You're trying to use @trpc/server in a non-server environmentEnvironment: Node v18.15.0, yarn, Next 13.2.4 What's wrong: When using `createServerSideHelpers`, iTRPC Middleware w/ InputHello! I was wondering if there is a way to add input fields onto a TRPC middleware. Essentially I Server side headers are not appliedHi guys I have the following trpc client initialized ``` import { createTRPCProxyClient, httpBatchLiGet tRPC procedure latency?Hi all, is there a supported mechanism to run common code to all procedures, say if I want to get laDoes or will trpc support http event stream?Does or will trpc support http event stream?Can't get wsLink's retryDelayMs to workI'm trying to add some backoff for when connecting to my websocket server fails. I've got the followcreateTRPCNext and createTRPCProxyClient within one NextJs appHey, Is there any possibility to use createTRPCNext and createTRPCProxyClient clients in one NextJs Calling axios requests not workingIf i call an API using axios in trpc query procedure It works if the url is https it dont if url is Best practices in naming and defining procedures when they don't fit into standard buckets?I am loving TRPC and its type safety, but I feel like I'm struggling with the naming of procedures. Separating routers into their own modules and merging them causes "any" type in clientHi all, I've separated my router into multiple files, but when merging them I get `any` types for aCan i use try/catch in procedures?can i use try/catch in procedures to pass the error when catching errors in my functions?custom query functionI have a use case where I need a trpc procedure call when a specific key is not present in the localTRPC type checking during build failsEnvironment: node 18.6.0, yarn Whats wrong: Type checking at build time fails. . I think this mightcreateTRPCNext config ctx always returns undefined.Hi Everyone. So I'm trying to use TRPC and Nextjs for auth and post query etc. I have client side cStandalone Next.js 13.3.2 errorHi, since the 13.3.2 update of Next.js, I have the following error : ``` TypeError: Cannot read proDoes tRPC works in application network layer (HTTP) or transport network layer (TCP, UDP)?Just wondering if tRPC uses TCP under the hood.