just had a look through the project and this is how I got it working app/root.tsx ```tsx export function Layout({ children }: { children: React.ReactNode }) { return ( {children} ); } export default function App() { const [queryClient] = useState( () => new QueryClient({ defaultOptions: { queries: { // With SSR/Prefetching, we usually want to set some default staleTime // above 0 to avoid refetching immediately on the client staleTime: 60 * 1000, }, }, }), ); const [trpcClient] = useState(() => trpc.createClient({ links: [httpBatchLink({ url: "/api/trpc" })], }), ); const dehydratedState = useDehydratedState(); return ( ); } ``` `app/routes/dashboard/index.tsx` ```tsx export async function loader({ context }: LoaderFunctionArgs) { await requireUser(context); const trpcHelpers = getTrpcServerSideHelpers(context); await trpcHelpers.user.currentUser.prefetch(); await trpcHelpers.entity.restaurant.getAllWithChildren.prefetch(); return json({ dehydratedState: trpcHelpers.dehydrate() }); } export default function Dashboard() { return (

); } ``` ```ts import { AppLoadContext } from "@remix-run/cloudflare"; import { createServerSideHelpers } from "@trpc/react-query/server"; import { appRouter } from "./routers/index.server"; export function getTrpcServerSideHelpers(context: AppLoadContext) { return createServerSideHelpers({ ctx: context, router: appRouter }); } ```

Using trpcState with Remix

Similar Threads

Similar Threads

Similar Threads