Next.js Discord

Discord Forum

Issue with Fetching Data in Next.js (T3 Stack) using Async Params and Suspense Queries

Unanswered
Yellow croaker posted this in #help-forum
Open in Discord
Yellow croakerOP
I'm trying to fetch data for my story/[storyId]/page.tsx component in a T3 Stack Next.js app, but I'm running into issues handling the id parameter and using useSuspenseQuery.

First attempt:
'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} />;
}


Issues:
- id seems to require await, but useSuspenseQuery is meant for client components.
- How should I properly handle params in this setup?


Second Attempt:
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} />;
}

- params.storyId is coming in as undefined.


I have a UserStories component that links to each story like this:
<Link
  href={`/story/${story.id}`}
  className="w-full rounded-full bg-white/10 px-4 py-2 text-center font-semibold transition hover:bg-white/20"
>
  Read Story
</Link>


How should I properly handle fetching the story data in my story/[storyId]/page.tsx component using the T3 stack? Given that useSuspenseQuery requires a client component and params might be async, what are my best options

9 Replies

LuisLl
In server components you should prefer to fetch data right in the component body and let React know your component is suspending by just awaiting the calls.

instead of use(promise) do await promise
LuisLl
Also, if you make your page a client component now you can to access the searchParams and params via the hooks Next.js provides useParams and useSearchParams.

But the best practice here would be to keep your pages and layouts always a Server Component.

Params and SearchParams come through props as promises, so you need to await them to access them, and just fetch inside the component, your <Suspense> wrapping your page will trigger as soon as it encounters an await keyword
@LuisLl In server components you should prefer to fetch data right in the component body and let React know your component is suspending by just awaiting the calls. instead of `use(promise)` do `await promise`
Yellow croakerOP
Okey so i tried this:

import { notFound } from "next/navigation";
import { api } from "@/trpc/react";
import StoryDisplay from "@/app/_components/StoryDisplay";

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

export default async function StoryPage({ params }: StoryPageProps) {
  const [story] = await api.story.getById.useSuspenseQuery({ id: params.storyId });
  
  if (!story) {
    notFound();
  }
  
  return <StoryDisplay story={story} />;
}


But that provides ts error:

Unexpected await of a non-Promise (non-"Thenable") value

And the error on client is:

TypeError: Cannot read properties of undefined (reading 'getById')
LuisLl
Don’t use the useSuspenseQuery() that won’t return what you’re expecting.
Instead call the regular server query, I’m not a TRPC user but I believe there’s the client queries via hooks and the server queries that don’t need a hook and can simply be awaited.
Yellow croakerOP
Yeah im using nextjs 15. idk this trpc feels a bit confusing, i understand it in some level but it feels a bit more stranger than server actions. Becuase with server action i could just fetch the data i want, but now even the .query does not work.

Like this code hits me error:
TRPCError: No procedure found on path "story,getById,query"


import { notFound } from "next/navigation";
import { api } from "@/trpc/server"; 
import StoryDisplay from "@/app/_components/StoryDisplay";

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

export default async function StoryPage({ params }: StoryPageProps) {
  const story = await api.story.getById.query({ id: params.storyId });
  
  if (!story) {
    notFound();
  }
  
  return <StoryDisplay story={story} />;
}
Or am i missing something how the data fetching works with this query thing now?
LuisLl
Tbh I’m not familiar with TRPC but the docs have a full guide on how to make it work with Server Components