T
TanStack•3y ago
stormy-gold

Using next Router with useQuery

Hello, I want to use useQuery by sending a param that I get from the next12 router. thing is, the router is async, so the "cid" i'm sending in here is undefined. How can I handle this? 
  const router = useRouter();
  const { cid } = router.query;
  const { data: character } = useCharacter(cid);
  const router = useRouter();
  const { cid } = router.query;
  const { data: character } = useCharacter(cid);
4 Replies
unwilling-turquoise
unwilling-turquoise•3y ago
enabled: !!cid
stormy-gold
stormy-goldOP•3y ago
Wow worked liked a charm! I'll look into it on the docs. btw my new syntax is this: 
useQuery({
    queryKey: ['character'],
    queryFn: () => getCharacter(characterId),
    enabled: !!characterId,
  });
useQuery({
    queryKey: ['character'],
    queryFn: () => getCharacter(characterId),
    enabled: !!characterId,
  });
and my old was:: 
useQuery(['character'], () => getCharacter(characterId))
useQuery(['character'], () => getCharacter(characterId))
I must use an object with useQuery to use the "enabled" option?
fascinating-indigo
fascinating-indigo•3y ago
Not mandatory but recommended. Also you have to put characterId in the queryKey.
stormy-gold
stormy-goldOP•3y ago
oh, right, thanks! haven't used useQuery for a dynamic data yet

Did you find this page helpful?