xSenny_ Posts - Answer Overflow

xSenny_

Explore posts from servers

•Created by xSenny_ on 3/9/2025 in #❓-help

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

2 replies

TTCTheo's Typesafe Cult

•Created by xSenny_ on 3/9/2025 in #questions

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

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

3 replies

TTCTheo's Typesafe Cult

•Created by xSenny_ on 3/5/2025 in #questions

Need help with useOptimistic()

Hey, for some reasons, when using this code:

"use client";

import { api } from "@/trpc/react";
import React, { startTransition, useOptimistic } from "react";

const LastList = () => {
  const { data, isLoading } = api.checklist.getLastList.useQuery();
  const { mutateAsync: toggleItem } = api.checklist.toggleItem.useMutation();

  const [optimisticItems, setOptimisticItems] = useOptimistic(
    data?.checklistItems ?? [],
    (items, { id, completed }) =>
      items.map((item) =>
        item.id === id ? { ...item, completed } : item
      )
  );

  const handleChange = async (id: string, completed: boolean) => {
    startTransition(async () => {
      await toggleItem({ id, completed });
      setOptimisticItems({ id, completed });
    });
  };

  return (
    <>
      {!isLoading && data && (
        <div className="card w-96 bg-base-300 text-start shadow-xl">
          <div className="card-body flex flex-col gap-6">
            <h2 className="card-title">{data.name}</h2>
            <div className="flex flex-col gap-2">
              {optimisticItems.map((e) => (
                <div className="flex justify-between" key={e.id}>
                  <p className={e.completed ? "line-through" : ""}>{e.name}</p>
                  <input
                    type="checkbox"
                    checked={e.completed}
                    className="checkbox checkbox-primary"
                    onChange={() => handleChange(e.id, !e.completed)}
                  />
                </div>
              ))}
            </div>
            <button className="btn btn-primary text-lg">+ New task</button>
          </div>
        </div>
      )}
    </>
  );
};

export default LastList;

"use client";

import { api } from "@/trpc/react";
import React, { startTransition, useOptimistic } from "react";

const LastList = () => {
  const { data, isLoading } = api.checklist.getLastList.useQuery();
  const { mutateAsync: toggleItem } = api.checklist.toggleItem.useMutation();

  const [optimisticItems, setOptimisticItems] = useOptimistic(
    data?.checklistItems ?? [],
    (items, { id, completed }) =>
      items.map((item) =>
        item.id === id ? { ...item, completed } : item
      )
  );

  const handleChange = async (id: string, completed: boolean) => {
    startTransition(async () => {
      await toggleItem({ id, completed });
      setOptimisticItems({ id, completed });
    });
  };

  return (
    <>
      {!isLoading && data && (
        <div className="card w-96 bg-base-300 text-start shadow-xl">
          <div className="card-body flex flex-col gap-6">
            <h2 className="card-title">{data.name}</h2>
            <div className="flex flex-col gap-2">
              {optimisticItems.map((e) => (
                <div className="flex justify-between" key={e.id}>
                  <p className={e.completed ? "line-through" : ""}>{e.name}</p>
                  <input
                    type="checkbox"
                    checked={e.completed}
                    className="checkbox checkbox-primary"
                    onChange={() => handleChange(e.id, !e.completed)}
                  />
                </div>
              ))}
            </div>
            <button className="btn btn-primary text-lg">+ New task</button>
          </div>
        </div>
      )}
    </>
  );
};

export default LastList;

, my code is optimistically updated, but after a second, the state gets reverted as it was. I can also confirm that the mutation function is working, since my database is changing. Probably I also have to edit the data as well, true?

3 replies

TTCTheo's Typesafe Cult

•Created by xSenny_ on 7/7/2024 in #questions

NextJS route.ts gets a 504 Gateway Timeout

Here is my code, I am basically fetching some data from mongodb and get this error. Everything works fine in my local build, but not while hosted on vercel. Here s my code

import {getEncryptedTransactions} from '@/lib/actions/restapi.actions'
import { NextRequest } from 'next/server'
export const GET = async (req: NextRequest, res: Response) => {
  try {
    const auth = req.headers.get('Authorization')

    if (auth === null) {
      return new Response(JSON.stringify({
        error: 'You did not add a Authorization header.'
      }), {status: 404, headers: {
        'Content-Type': 'application/json'
      }})
    }

    const limit = Number(req.nextUrl.searchParams.get('limit') || 10)

    const transactions = await getEncryptedTransactions(auth, limit)

    return new Response(JSON.stringify(transactions), {status: 200, headers: {
      'Content-Type': 'application/json'
    }})
  } catch (e: unknown) {
    return new Response(JSON.stringify({
      error: e instanceof Error ? e.message : 'An unknown error happened.'
    }), {status: 500, headers: {
      'Content-Type': 'application/json'
    }})
  }
}

import {getEncryptedTransactions} from '@/lib/actions/restapi.actions'
import { NextRequest } from 'next/server'
export const GET = async (req: NextRequest, res: Response) => {
  try {
    const auth = req.headers.get('Authorization')

    if (auth === null) {
      return new Response(JSON.stringify({
        error: 'You did not add a Authorization header.'
      }), {status: 404, headers: {
        'Content-Type': 'application/json'
      }})
    }

    const limit = Number(req.nextUrl.searchParams.get('limit') || 10)

    const transactions = await getEncryptedTransactions(auth, limit)

    return new Response(JSON.stringify(transactions), {status: 200, headers: {
      'Content-Type': 'application/json'
    }})
  } catch (e: unknown) {
    return new Response(JSON.stringify({
      error: e instanceof Error ? e.message : 'An unknown error happened.'
    }), {status: 500, headers: {
      'Content-Type': 'application/json'
    }})
  }
}

Could it be because of it being slow?

3 replies

Gaming

Programming