Error: No QueryClient set, use QueryClientProvider to set one

Mmonad1kos

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;

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

Mmonad1kos

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?

Mmichaelschufi

5/7/2023

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.

Mmichaelschufi

5/7/2023

I've been using the Next.js integration btw.