Error: No QueryClient set, use QueryClientProvider to set one

TLCtribalized lobotomy champion

5/5/2023

Hello! 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({
    slug,
  });

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

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

  if (data && data.name === "") {
    router.push("/");
    return null;
  }

  return (
    <>
      <Head>
        <title>{`${data.name}`}</title>
      </Head>
      <Layout>
        <div>Hello from room {`${data.name}`}</div>
      </Layout>
    </>
  );
};

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(),
      slug,
    },
  };
};

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

export default Room;

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({
    slug,
  });

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

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

  if (data && data.name === "") {
    router.push("/");
    return null;
  }

  return (
    <>
      <Head>
        <title>{`${data.name}`}</title>
      </Head>
      <Layout>
        <div>Hello from room {`${data.name}`}</div>
      </Layout>
    </>
  );
};

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(),
      slug,
    },
  };
};

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

export default Room;

The error in particular looks like: https://i.imgur.com/o3C1Zas.png

TLCtribalized lobotomy champion

5/5/2023

Adding this as a dependency resolved the issue inside package.json: "@tanstack/react-query": "^4.20.4",

Mmichaelschufi

5/7/2023

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

Nnlucas

5/7/2023

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

Mmichaelschufi

5/7/2023

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!

tRPC

Error: No QueryClient set, use QueryClientProvider to set one

Join Server

tRPC

Error: No QueryClient set, use QueryClientProvider to set one

Join Server

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`, i TRPC 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, httpBatchLi Get tRPC procedure latency?Hi all, is there a supported mechanism to run common code to all procedures, say if I want to get la Does 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 follow createTRPCNext 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 a Can 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 local TRPC type checking during build failsEnvironment: node 18.6.0, yarn Whats wrong: Type checking at build time fails. . I think this might createTRPCNext 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 c Standalone Next.js 13.3.2 errorHi, since the 13.3.2 update of Next.js, I have the following error : ``` TypeError: Cannot read pro Does tRPC works in application network layer (HTTP) or transport network layer (TCP, UDP)?Just wondering if tRPC uses TCP under the hood.