Theo's Typesafe Cult•14mo ago

Suspense with TRPC server query

Hi, I'm trying to query some data using TRPC in my server component. However, when using React.Suspense, I never see a fallback (even if I disable cache and use a slow 3G connection). I'm not sure if this is not the right pattern or if I just can't test it properly.

import Link from "next/link";
import React, { Suspense } from "react";
import { api } from "~/trpc/server";
import { buttonVariants } from "./ui/button";

interface ChooseBuildingProps {
  departmentId: string;
}

export async function ChooseBuilding({ departmentId }: ChooseBuildingProps) {
  const buildings = await api.building.getBuildings.query();
  return (
    <>
      <div className="pb-12">
      </div>
      <div className="mx-auto flex w-full flex-col justify-center gap-6 md:flex-row">
        <Suspense fallback={<div>Loading ...</div>}>
          {buildings.map((building) => (
            <Link
              href={`/department/${departmentId}/building/${building.id}`}
              key={building.id}
              className={buttonVariants({ variant: "ghost" })}
            >
              {building.name}
            </Link>
          ))}
        </Suspense>
      </div>
    </>
  );
}

import Link from "next/link";
import React, { Suspense } from "react";
import { api } from "~/trpc/server";
import { buttonVariants } from "./ui/button";

interface ChooseBuildingProps {
  departmentId: string;
}

export async function ChooseBuilding({ departmentId }: ChooseBuildingProps) {
  const buildings = await api.building.getBuildings.query();
  return (
    <>
      <div className="pb-12">
      </div>
      <div className="mx-auto flex w-full flex-col justify-center gap-6 md:flex-row">
        <Suspense fallback={<div>Loading ...</div>}>
          {buildings.map((building) => (
            <Link
              href={`/department/${departmentId}/building/${building.id}`}
              key={building.id}
              className={buttonVariants({ variant: "ghost" })}
            >
              {building.name}
            </Link>
          ))}
        </Suspense>
      </div>
    </>
  );
}

4 Replies

Vinay Nair•12mo ago

Any luck with this mate?

General Mudkipp•12mo ago

One option would be to check query.isFetched, and return a skeleton if it isn’t.

peterkyle01•12mo ago

Try const { buildings, isLoading } = await api.building.... then before return statement: isLoading ? return <div>Loading</div> : return <>// your component </>

Spark•11mo ago

you just have to remove the await. here is an example: https://github.com/t3-oss/create-t3-turbo/blob/main/apps/nextjs/src/app/page.tsx

GitHub

create-t3-turbo/apps/nextjs/src/app/page.tsx at main · t3-oss/creat...

Clean and simple starter repo using the T3 Stack along with Expo React Native - t3-oss/create-t3-turbo

Gaming

Programming

Suspense with TRPC server query