This is basic, but can't get it working correctly. The page should fetch data from the server. The page and the server api take the same query parameter. I only want to fetch when query parameters have been loaded from useRouter(). But the query parameter (someParam in this case), is optional. Meaning http//localhost:3000/clientpage?someParam=123 should fetch, as should http//localhost:3000/clientpage. But the former should not fetch twice.

export default function ClientPage() {
  const router = useRouter();
  const { query } = router;
  const { someParam } = query;

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(`/api/someEndpoint${someParam ? `&someParam=${someParam}` : ""}`);
      const jsonData = await response.json();
      // ...
    }
    fetchData();
  }, [query]);

  return (
    ...

This doesn't ever fetch because apparently query is never updated. And by the way, is the behavior different if I get to this page directly vs from a <Link ...>? I'm using page router.