welp•2y 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

welpOP•2y ago

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

Michael Schaufelberger•2y 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•2y 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

Michael Schaufelberger•2y 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.