Stream closed, but it returns the actual data

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

0 Replies

No replies yetBe the first to reply to this messageJoin

Stream closed, but it returns the actual data

Did you find this page helpful?