2

Have a simple page setup in nextJS and use useRouter hook to grab the route param like so.

 const router = useRouter();
 const { user_id } = router.query;

I would like to fetch data using useQuery and passing in the user_id param into the callback function like so:

  const { isLoading, isError, isSuccess, data } = useQuery(
    ["user", user_id],
    () => getUser(user_id)
  );

The problem seems to be that the user_id is undefined when the component renders initially and thus that value is passed into the query callback function and essentially returns no data.

Is there anything I can do to delay the useQuery callback so that it fetches when user_id is defined? Any help would be appreciated.

Marty_Maestro
  • 53
  • 3
  • You can check for user_id value in the query function. Here's how it can look like -> useQuery(['user', user_id], async () => user_id ? getUser(user_id) : null) – Sanzhar Dan Nov 22 '22 at 19:00

0 Answers0