TanStackT
TanStack•2y ago•
1 reply
cold-orange

Cannot update a component (Router) while rendering a different component

Hello, it's me again. is there anyway I can avoid using 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


Upon searching and reading some stackoverflow, I came across using useEffect, but i want to use 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
  }
}



and then I tried to fetch it

"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>;
}
Was this page helpful?