useQuery param is undefined. but query is enabled only if the param is defined.
im trying to set up some searching. and came across this error. i am not sure if i am missing something in my reasoning for why this should work (some react or maybe react-query rules/quirks). SSR is off btw.
9 Replies
router.query will be undefined on first render, as next.js router blows
thus, router.query.term will be undefined
router.query?.term would prevent it from throwing an errorOr, you could use this for your router https://github.com/B3nten/notescroll/blob/main/src/common/hooks/useClientRouter.tsx
GitHub
notescroll/useClientRouter.tsx at main · B3nten/notescroll
A journaling webapp for tabletop gamers. Contribute to B3nten/notescroll development by creating an account on GitHub.
(or any next.js router monkeypatch lib)
yea im realizing how trash it is at types. constantly having to cast is a pita.
i get that its not defined on first render, but the react-query is not enabled until the router (more precisely
router.query.term) is defined. i would have expected the error to say something cannot read property "term" of undefined when trying to determine if the useQuery should be enabled (since router.query is undefined), but instead its throwing an error on .trim()Because you can't
trim() something that's undefinedight i guess my point is. shouldnt that particualr useQuery. not be executed untill
router.query?.term is defined as is inidicated with the enabled option. IF its the case, then why is it even trying to call .trim() on the param if no react-query should be going out..trim() is called during the function definition afaikyea, ive changed the logic to work around that. it ended up being kinda buggy because i was calling a hook
useDebounce inside of the useQuery which react understandably didnt like.
but originally yea i was a sure it was a string. there was only one function that was modifying it and it looked like this (without the debounce, i add that recently as part of the workaround)