TTC
Theo's Typesafe Cult•4w ago
xSenny_

Stream Closed, but I'm getting my results

So I have this procedure that simply returns a list of objects from db: 
getAllHabits: protectedProcedure.query(({ ctx }) => {
    if (!ctx.session.user.id) return [];
    // return []
    const userId = ctx.session.user.id;

    return ctx.db.habit.findMany({
      where: {
        userId: userId,
      },
      orderBy: {
        createdAt: "desc",
      },
      include: {
        streaks: true,
      },
    });
  }),
getAllHabits: protectedProcedure.query(({ ctx }) => {
    if (!ctx.session.user.id) return [];
    // return []
    const userId = ctx.session.user.id;

    return ctx.db.habit.findMany({
      where: {
        userId: userId,
      },
      orderBy: {
        createdAt: "desc",
      },
      include: {
        streaks: true,
      },
    });
  }),
. The thing is that it returns the correct list, but it also gets me a Stream Closed error, even when I'm artificially returning an empty list. What's actually wrong with it? This is how I'm calling the function, I was inspired from the t3-app post query 
export default function Dashboard() {

  void api.habit.getAllHabits.prefetch();

  return (
    <div className="flex flex-col items-center justify-center gap-10 p-10">
      <HabitsLibrary />

      <CreateHabit>
        <Button>Create Habit</Button>
      </CreateHabit>
    </div>
  )
}
export default function Dashboard() {

  void api.habit.getAllHabits.prefetch();

  return (
    <div className="flex flex-col items-center justify-center gap-10 p-10">
      <HabitsLibrary />

      <CreateHabit>
        <Button>Create Habit</Button>
      </CreateHabit>
    </div>
  )
}
and 
export default function HabitsLibrary() {
  const [allHabits] = api.habit.getAllHabits.useSuspenseQuery();

  return (
    <div className="grid w-[90vw] gap-8 rounded-xl p-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
      {allHabits && allHabits.map((h) => <HabitCard key={h.id} habit={h} />)}
    </div>
  );
}
export default function HabitsLibrary() {
  const [allHabits] = api.habit.getAllHabits.useSuspenseQuery();

  return (
    <div className="grid w-[90vw] gap-8 rounded-xl p-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
      {allHabits && allHabits.map((h) => <HabitCard key={h.id} habit={h} />)}
    </div>
  );
}
1 Reply
xSenny_
xSenny_OP•4w ago
Nevermind, went on to use useQuery instead of useSuspenseQuery, but I don't know then how the original example works with SuspenseQuery

Did you find this page helpful?