vntbln•5d ago

Error: Switched to client rendering because the server rendering errored: UNAUTHORIZED

What could be the possible reason for this error? This is how my NextJS structure looks when using tRPC. - /app/settings/page.tsx

export const dynamic = 'force-dynamic'

export default function Settings() {
  prefetch(trpc.categories.getMany.queryOptions())
  return (
    <HydrateClient>
      <CategoriesView />
    </HydrateClient
  )
}

export const dynamic = 'force-dynamic'

export default function Settings() {
  prefetch(trpc.categories.getMany.queryOptions())
  return (
    <HydrateClient>
      <CategoriesView />
    </HydrateClient
  )
}

- /components/settings/view/categories-view.tesx

'use client'
export const CategoriesView = () => {
  return <CategoriesSection />
}

'use client'
export const CategoriesView = () => {
  return <CategoriesSection />
}

- /components/settings/section/categories-section.tsx

export const CategoriesSection = () => {
  return (
    <Suspense fallback={<p>Loading...</p>}
      <ErrorBoundary fallback={<p>Error</p>}
        <CategoriesSectionSuspense />
      </ErrorBoundary>
    </Suspense>
  )
}

const CategoriesSectionSuspense = () => {
  const trpc = useTRPC()
  const { data } = useSuspenseQuery(trpc.categories.getMany.queryOptions())

  return <CategoriesDataTable data={data} />
}

export const CategoriesSection = () => {
  return (
    <Suspense fallback={<p>Loading...</p>}
      <ErrorBoundary fallback={<p>Error</p>}
        <CategoriesSectionSuspense />
      </ErrorBoundary>
    </Suspense>
  )
}

const CategoriesSectionSuspense = () => {
  const trpc = useTRPC()
  const { data } = useSuspenseQuery(trpc.categories.getMany.queryOptions())

  return <CategoriesDataTable data={data} />
}

14 Replies

BeBoRE•5d ago

Cookies aren’t being properly passed on when fetching in SSR, still a restriction with useSuspenseQuery.

vntblnOP•5d ago

when I tried to comment back the shouldDehydrateQuery I'm not getting that error, but the continuously sending a request is my problem when I'm not logged in and try to refresh the page, It will always sending a request on the api even I have a Suspense and ErrorBoundary, so on the network tab on chrome dev tools I have a thousands request

BeBoRE•5d ago

Yeah, you shouldn’t retry on server I use this to prevent retries on server render:

defaultOptions: {
  queries: {
    // With SSR, we usually want to set some default staleTime
    // above 0 to avoid refetching immediately on the client
    staleTime: 1000 * 1 * 30,
    retry: (count, error) => {
      const toAttempt = isServer ? 0 : 3;

      if (!isTRPCClientError(error) || !error.data) {
        return toAttempt < count;
      }

      if (error.data.httpStatus >= 400 && error.data.httpStatus < 500) {
        return false;
      }

      return toAttempt < count;
    },
  },

defaultOptions: {
  queries: {
    // With SSR, we usually want to set some default staleTime
    // above 0 to avoid refetching immediately on the client
    staleTime: 1000 * 1 * 30,
    retry: (count, error) => {
      const toAttempt = isServer ? 0 : 3;

      if (!isTRPCClientError(error) || !error.data) {
        return toAttempt < count;
      }

      if (error.data.httpStatus >= 400 && error.data.httpStatus < 500) {
        return false;
      }

      return toAttempt < count;
    },
  },

vntblnOP•5d ago

so the shouldDehydrateQuery should be enabled? and I will only add this to prevent the continuously sending request?

vntblnOP•5d ago

here's the sample of the error that I'm talking about continuously sending request

vntblnOP•5d ago

when the shouldDehydrateQuery is enabled even I have Suspense and ErrorBoundary

BeBoRE•5d ago

You should leave the shouldDehydrateQuery as is Keep whatever the defaults were given by trpc

vntblnOP•5d ago

Okay thank you, I will try your code. And actually, the guide I followed is this tRPG Tanstack React Query (Server Components).

BeBoRE•5d ago

Yeah, they sometimes do not provide good defaults

vntblnOP•5d ago

your code is missing the variable of isServer where I can get this

vntblnOP•5d ago

can you provide the full code? @BeBoRE

BeBoRE•5d ago

React query gives you this

export const isTRPCClientError = (
  error: Error,
): error is TRPCClientError<AppRouter> => {
  return error instanceof TRPCClientError;
};

export const isTRPCClientError = (
  error: Error,
): error is TRPCClientError<AppRouter> => {
  return error instanceof TRPCClientError;
};

import {
  defaultShouldDehydrateQuery,
  isServer,
  QueryClient,
} from "@tanstack/react-query";

import {
  defaultShouldDehydrateQuery,
  isServer,
  QueryClient,
} from "@tanstack/react-query";

vntblnOP•5d ago

oohh I see, thank you, I'm new to trpc and react query, I just following the youtube clone by @CodeWithAntonio

Error: Switched to client rendering because the server rendering errored: UNAUTHORIZED

Did you find this page helpful?