welp
welp13mo ago

Error: No QueryClient set, use QueryClientProvider to set one

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
Imgur
4 Replies
welp
welp13mo ago
Adding this as a dependency resolved the issue inside package.json: "@tanstack/react-query": "^4.20.4",
michaelschufi
michaelschufi13mo ago
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
Nick
Nick13mo ago
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
Set up the React Query Integration | tRPC
How to use and setup tRPC in React
michaelschufi
michaelschufi13mo ago
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.