chungweileong
chungweileong
PostsComments
TtRPC
Created by chungweileong on 12/18/2023 in #❓-help
Keep suspense on SSR
I'm currently trying to perform a trpc query in Nextjs with React suspense, however, I only want the the query to be run on client-side only. Here are the options that I already tried: - Throw error while in SSR with a custom link. It works, but I will get a bunch of errors in my Sentry ☹️ 
const ssrLink: TRPCLink<AppRouter> = () => {
  return () => {
    return observable((observer) => {
      observer.error(new TRPCClientError('PURPOSELY DISABLE TRPC IN SSR'));
    });
  };
};
const ssrLink: TRPCLink<AppRouter> = () => {
  return () => {
    return observable((observer) => {
      observer.error(new TRPCClientError('PURPOSELY DISABLE TRPC IN SSR'));
    });
  };
};
- Throw promise in my component while in SSR. 
export function MyComponent() {
  // This will prevent the query from running in SSR, and avoiding any hydration mismatch errors
  if (typeof window === 'undefined') throw Promise.resolve('Suspense in SSR');

  const [data] = api.dashboard.getStats.useSuspenseQuery();

  return <>...</>
}
export function MyComponent() {
  // This will prevent the query from running in SSR, and avoiding any hydration mismatch errors
  if (typeof window === 'undefined') throw Promise.resolve('Suspense in SSR');

  const [data] = api.dashboard.getStats.useSuspenseQuery();

  return <>...</>
}
Throwing promise works really good in my case, but I'm wondering if I can throw it in TRPC link instead?
3 replies