Cannot update a component (Router) while rendering a different component
Hello, it's me again. is there anyway I can avoid using
Upon searching and reading some stackoverflow, I came across using useEffect, but i want to use
and then I tried to fetch it
useEffect for fetching data and use useQuery instead?
So I created a server action that will get id from URL and then pass it as a queryFn, but then, I get this error
Warning: Cannot update a component (`Router`) while rendering a different component (`EventPageDetail`). To locate the bad setState() call inside `EventPageDetail`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
Warning: Cannot update a component (`Router`) while rendering a different component (`EventPageDetail`). To locate the bad setState() call inside `EventPageDetail`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
useQuery instead.
this is my server action
export async function getDataById(id: any){
try {
const data = await db.appoinmentSchedule.findUnique({
where: {
id:id
}
})
return data
} catch (error) {
return error
}
}
export async function getDataById(id: any){
try {
const data = await db.appoinmentSchedule.findUnique({
where: {
id:id
}
})
return data
} catch (error) {
return error
}
}
"use client";
import { getDataById } from "@/data-query/appointment";
import { useQuery } from "@tanstack/react-query";
import { useParams } from "next/navigation";
import React, { useEffect, useState, useTransition } from "react";
export default function EventPageDetail() {
const {eventId} = useParams()
const {data, error, isFetching} = useQuery({
queryKey: ['data'],
queryFn: getDataById(eventId)
})
return <div>EventPageDetail</div>;
}
"use client";
import { getDataById } from "@/data-query/appointment";
import { useQuery } from "@tanstack/react-query";
import { useParams } from "next/navigation";
import React, { useEffect, useState, useTransition } from "react";
export default function EventPageDetail() {
const {eventId} = useParams()
const {data, error, isFetching} = useQuery({
queryKey: ['data'],
queryFn: getDataById(eventId)
})
return <div>EventPageDetail</div>;
}
1 Reply
xenophobic-harlequinOP•17mo ago
additonal:
I also get this warning coming from
queryFn
No overload matches this call.
Overload 1 of 3, '(options: DefinedInitialDataOptions<unknown, Error, unknown, string[]>, queryClient?: QueryClient | undefined): DefinedUseQueryResult<unknown, Error>', gave the following error.
Type 'Promise<unknown>' is not assignable to type 'unique symbol | QueryFunction<unknown, string[], never> | undefined'.
Overload 2 of 3, '(options: UndefinedInitialDataOptions<unknown, Error, unknown, string[]>, queryClient?: QueryClient | undefined): UseQueryResult<unknown, Error>', gave the following error.
Type 'Promise<unknown>' is not assignable to type 'unique symbol | QueryFunction<unknown, string[], never> | undefined'.
Overload 3 of 3, '(options: UseQueryOptions<unknown, Error, unknown, string[]>, queryClient?: QueryClient | undefined): UseQueryResult<unknown, Error>', gave the following error.
Type 'Promise<unknown>' is not assignable to type 'unique symbol | QueryFunction<unknown, string[], never> | undefined'.ts(2769)
No overload matches this call.
Overload 1 of 3, '(options: DefinedInitialDataOptions<unknown, Error, unknown, string[]>, queryClient?: QueryClient | undefined): DefinedUseQueryResult<unknown, Error>', gave the following error.
Type 'Promise<unknown>' is not assignable to type 'unique symbol | QueryFunction<unknown, string[], never> | undefined'.
Overload 2 of 3, '(options: UndefinedInitialDataOptions<unknown, Error, unknown, string[]>, queryClient?: QueryClient | undefined): UseQueryResult<unknown, Error>', gave the following error.
Type 'Promise<unknown>' is not assignable to type 'unique symbol | QueryFunction<unknown, string[], never> | undefined'.
Overload 3 of 3, '(options: UseQueryOptions<unknown, Error, unknown, string[]>, queryClient?: QueryClient | undefined): UseQueryResult<unknown, Error>', gave the following error.
Type 'Promise<unknown>' is not assignable to type 'unique symbol | QueryFunction<unknown, string[], never> | undefined'.ts(2769)