I’m having a little bit of problem on rendering the initial data for the current date, in my system I have a calendar wherein the first thing it will select is the current date, and it should show the current event on that day.

This is what shows.

it says “No event today”. But when I click other date, and then click back to July 15. It then shows the data

This is my querycall.

  const selectedDate = useQuery<GetSelectedDateResponseType>({
    queryKey: ['data', 'history', date],
    queryFn: () => fetch(`/api/data-calendar?currentDate=${DateToUTCDate(date)}`).then((res) => res.json())
  })

  const dry_run_false = selectedDate.data?.dry_run_false
  const dry_run_true = selectedDate.data?.dry_run_true

DateTOUTC

export function DateToUTCDate(date: Date) {
    return new Date(
      Date.UTC(
        date.getFullYear(),
        date.getMonth(),
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
        date.getMilliseconds()
      )
    );
  }
  

I even created a skeletonwrapper wherein it will load first before rendering the data

<SkeletonWrapper isLoading={selectedDate.isFetching}>
      {dry_run_false?.length === 0 ? (
           <p>No event today</p>
            ) : (
            <>
            {dry_run_false?.map((item) => (
              <div>
                 <CardEvent data={item} />
              </div>
              ))}
             </>
                )}
    </SkeletonWrapper>

I check my querytool and this shows. I do get empty array

This is my api-call.

import { db } from "@/lib/db"
import { CurrentDateQuerySchema } from "@/schema/overview"
import { endOfDay, startOfDay } from "date-fns"

export async function GET(request: Request) {
    const { searchParams } = new URL(request.url)
    const currentDate = searchParams.get('currentDate')
    const queryParams = CurrentDateQuerySchema.safeParse({ currentDate })

    if (!queryParams.success) {
        return Response.json(queryParams.error.message, {
            status: 400
        })
    }



    const result = await getSelectedDate(queryParams.data.currentDate)
    console

    return Response.json(result)
}

export type GetSelectedDateResponseType = Awaited<ReturnType<typeof getSelectedDate>>

async function getSelectedDate(currentDate: Date) {
    
    const start = startOfDay(currentDate)
    const end = endOfDay(currentDate)
    const dry_run_false = await db.appointment.findMany({
        where: {
            event_date: {
                gte: start,
                lte: end
            },
            does_have_dry_run: false
        },
        orderBy: {
            event_date: 'desc'
        }
    })


    const dry_run_true = await db.appointment.findMany({
        where: {
            event_date: {
                gte: start,
                lte: end
            },
            does_have_dry_run: true
        },
        orderBy: {
            event_date: 'desc'
        }
    })



    return {
        dry_run_false,
        dry_run_true
    }
}