My url is: http://localhost:3000/pany/60050bd166cb770942b1dadd

I want to get the value of the id by using router.query. However when I console log router.query, it returns an empty object first and then return the object with data. This results in bugs in other parts of my code as I need the value of the id to fetch other data.

This is my code:

import { useRouter } from 'next/router';
import styles from './CompanyId.module.css';

import { useQuery } from '@apollo/client';
import { COMPANY_DETAILS } from '../../queries/pany';

const CompanyDetails = () => {
  const router = useRouter();
  console.log(router.query);

  const { loading, data } = useQuery(COMPANY_DETAILS, {
    variables: { _id: panyId },
  });

  return (
    <div className={styles.container}>
      {loading ? <h1>Loading</h1> : <h1>{datapany.name}</h1>}
    </div>
  );
};

export default CompanyDetails;

My program is crashing right now because the panyId variable is empty on the first render. Is there anyway to go around this problem?

My url is: http://localhost:3000/pany/60050bd166cb770942b1dadd

I want to get the value of the id by using router.query. However when I console log router.query, it returns an empty object first and then return the object with data. This results in bugs in other parts of my code as I need the value of the id to fetch other data.

This is my code:

import { useRouter } from 'next/router';
import styles from './CompanyId.module.css';

import { useQuery } from '@apollo/client';
import { COMPANY_DETAILS } from '../../queries/pany';

const CompanyDetails = () => {
  const router = useRouter();
  console.log(router.query);

  const { loading, data } = useQuery(COMPANY_DETAILS, {
    variables: { _id: panyId },
  });

  return (
    <div className={styles.container}>
      {loading ? <h1>Loading</h1> : <h1>{data.pany.name}</h1>}
    </div>
  );
};

export default CompanyDetails;

My program is crashing right now because the panyId variable is empty on the first render. Is there anyway to go around this problem?

• javascript
• next.js

• Try to wrap your your fetch function inside usetEffect and use useLazyQuery instead, and then update the state with useState – Nico Commented Jan 18, 2021 at 8:52
• @Nico thank you for your input, I tried it with useLazyQuery along with useEffect and it works :) – Aidenhsy Commented Jan 18, 2021 at 10:27
• If anyone else with [email protected] is experiencing this issue and is unable to fix it, upgrading to [email protected] resolved the issue for me. – gurun8 Commented Oct 4, 2022 at 19:50

2 Answers 2

In Next.js:

• Pages that are statically optimized by Automatic Static Optimization will be hydrated without their route parameters provided, i.e query will be an empty object ({}).

• After hydration, Next.js will trigger an update to your application to provide the route parameters in the query object.

I solved it by using useLazyQuery instead of useQuery, and wrapped the function inside useEffect.

The problem was that NextJS's router.query returns an empty object on the first render and the actual object containing the query es in at the second render.

This code works:

import React, { useEffect } from 'react';
import { useRouter } from 'next/router';
import styles from './CompanyId.module.css';

import { useLazyQuery } from '@apollo/client';
import { COMPANY_DETAILS } from '../../queries/pany';

const CompanyDetails = () => {
  const router = useRouter();

  const [getCompany, { loading, data }] = useLazyQuery(COMPANY_DETAILS);

  useEffect(() => {
    if (router.query.panyId) {
      getCompany({ variables: { _id: router.query.panyId } });
    }
  }, [router.query]);

  if (loading) return <h1>Loading....</h1>;

  return (
    <div className={styles.container}>
      {data && <h1>{data.pany.name}</h1>}
    </div>
  );
};

export default CompanyDetails;