robertinio Posts - Answer Overflow

robertinio

•Created by robertinio on 11/7/2023 in #questions

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

6 replies

Gaming

Programming