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
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.