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