jepcd Comments

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className="h-screen w-screen">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body className="size-full">
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

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 (
    <HydrationBoundary state={dehydratedState} queryClient={queryClient}>
      <trpc.Provider client={trpcClient} queryClient={queryClient}>
        <QueryClientProvider client={queryClient}>
          <Theme appearance="dark" accentColor="lime" radius="full" className="size-full">
            <Outlet />
            <Modals />
            <ThemePanel defaultOpen={false} />
            <Toaster richColors theme="dark" />
            <ReactQueryDevtools initialIsOpen={false} />
          </Theme>
        </QueryClientProvider>
      </trpc.Provider>
    </HydrationBoundary>
  );
}

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className="h-screen w-screen">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body className="size-full">
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

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 (
    <HydrationBoundary state={dehydratedState} queryClient={queryClient}>
      <trpc.Provider client={trpcClient} queryClient={queryClient}>
        <QueryClientProvider client={queryClient}>
          <Theme appearance="dark" accentColor="lime" radius="full" className="size-full">
            <Outlet />
            <Modals />
            <ThemePanel defaultOpen={false} />
            <Toaster richColors theme="dark" />
            <ReactQueryDevtools initialIsOpen={false} />
          </Theme>
        </QueryClientProvider>
      </trpc.Provider>
    </HydrationBoundary>
  );
}

app/routes/dashboard/index.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 (
    <PanelGroup direction="horizontal">
      <Panel defaultSize={20} minSize={15} id="sidebar-panel" order={1}>
        <SidebarPanel />
      </Panel>
      <ResizeHandle />
      <Panel defaultSize={80} minSize={50} id="index-panel" order={2}>
        <div className="flex h-full flex-col">
          <DashboardNav />
          <div className="grow bg-gray-1 p-4">
            <Outlet />
          </div>
        </div>
      </Panel>
    </PanelGroup>
  );
}

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 (
    <PanelGroup direction="horizontal">
      <Panel defaultSize={20} minSize={15} id="sidebar-panel" order={1}>
        <SidebarPanel />
      </Panel>
      <ResizeHandle />
      <Panel defaultSize={80} minSize={50} id="index-panel" order={2}>
        <div className="flex h-full flex-col">
          <DashboardNav />
          <div className="grow bg-gray-1 p-4">
            <Outlet />
          </div>
        </div>
      </Panel>
    </PanelGroup>
  );
}

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 });
}

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 });
}

11 replies

TtRPC

•Created by jepcd on 6/5/2024 in #❓-help

Using trpcState with Remix

yeah, I followed the react query docs here: https://tanstack.com/query/v4/docs/framework/react/guides/ssr#using-hydration-1

11 replies

TtRPC

•Created by jepcd on 6/5/2024 in #❓-help

Using trpcState with Remix

^ if anyone else finds it useful

11 replies

TtRPC

•Created by jepcd on 6/5/2024 in #❓-help

Using trpcState with Remix

Was able to get it to work by following teh react query docs for remix prefetching

11 replies