Question regarding tRPC

Hello everyone, I have the following file in src/pages/room/[slug].tsx:

import type { 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 { 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 default Room;

import type { 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 { 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 default Room;

And the error I am getting is: Error: No QueryClient set, use QueryClientProvider to set one Furthermore, a very interesting behavior occurs: the error gets bypassed somehow and the page renders successfully, the query/trpc works eventually but clerk CSS/function just breaks. https://streamable.com/97zknm I would appreciate some clarity.

Streamable

bug_show

3 Replies

Neto•14mo ago

did you wrap the tree with the trpc provider?

Neto•14mo ago

https://trpc.io/docs/nextjs/setup#5-configure-_apptsx

Set up with Next.js | tRPC

Recommended file structure

welp•14mo ago

yeah tRPC is set correctly otherwise this wouldn't work

const MyApp: AppType = ({ Component, pageProps }) => {
  return (
    <ClerkProvider {...pageProps}>
      <Head>
        <GlobalStyles />
      </Head>
      <Component {...pageProps} />
    </ClerkProvider>
  );
};

export default api.withTRPC(MyApp);

const MyApp: AppType = ({ Component, pageProps }) => {
  return (
    <ClerkProvider {...pageProps}>
      <Head>
        <GlobalStyles />
      </Head>
      <Component {...pageProps} />
    </ClerkProvider>
  );
};

export default api.withTRPC(MyApp);

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

Gaming

Programming

Question regarding tRPC