TTC
Theo's Typesafe Cult•2mo ago
Manqo

Handling Async Params and Suspense Queries in a T3 Stack Next.js App

I'm having issues with fetching data for my story/[storyId]/page.tsx component. 
'use client'
import { notFound } from "next/navigation";
import { api } from "@/trpc/react";
import StoryDisplay from "@/app/_components/StoryDisplay";
import { use } from "react";

export default function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params); 
  
  const [story] = api.story.getById.useSuspenseQuery({id});
  
  if (!story) {
    notFound();
  }
  
  return <StoryDisplay story={story} />;
}
'use client'
import { notFound } from "next/navigation";
import { api } from "@/trpc/react";
import StoryDisplay from "@/app/_components/StoryDisplay";
import { use } from "react";

export default function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params); 
  
  const [story] = api.story.getById.useSuspenseQuery({id});
  
  if (!story) {
    notFound();
  }
  
  return <StoryDisplay story={story} />;
}
What kind of options do I have here? It seems that id requires await, while useSuspenseQuery requires a server component. How should I tackle this issue using the T3 stack?
2 Replies
Manqo
ManqoOP•2mo ago
I have also tried it without the use of react: 
import { notFound } from "next/navigation";
import { api } from "@/trpc/react";
import StoryDisplay from "@/app/_components/StoryDisplay";

interface StoryPageProps {
  params: {
    storyId: string;
  };
}

export default function StoryPage({ params }: StoryPageProps) {
  const [story] = api.story.getById.useSuspenseQuery({ id: params.storyId });
  
  if (!story) {
    notFound();
  }
  
  return <StoryDisplay story={story} />;
}
import { notFound } from "next/navigation";
import { api } from "@/trpc/react";
import StoryDisplay from "@/app/_components/StoryDisplay";

interface StoryPageProps {
  params: {
    storyId: string;
  };
}

export default function StoryPage({ params }: StoryPageProps) {
  const [story] = api.story.getById.useSuspenseQuery({ id: params.storyId });
  
  if (!story) {
    notFound();
  }
  
  return <StoryDisplay story={story} />;
}
But for some reason the id is undefined?
DogPawHat
DogPawHat•2mo ago
This is with app router right? You need to wrap any component using use and useSuspenseQuery in a Suspense boundary.

Did you find this page helpful?