How to initialize router before rendering anything in Nextjs?

Question

I'm using react-query, when I get the id from the url and try to call it inside getSubject, it passes an undefined value http://localhost:3000/api/subject/undefined

but when I click a link from another component to get in this subject component it works but if refresh the page it does not work.

  const router = useRouter()

  const { id } = router.query

  const { data } = useQuery('subjects', async () => await getSubject(id))

  return value...
}

Does this answer your question: Conditionally calling an API using React-Query hook? You can use Dependent Queries so the query is only run if id is set, i.e. { enabled: !!id }. — juliomalves
– juliomalves, Commented Sep 25, 2021 at 15:29

Алексей Мартинкевич · Accepted Answer · 2021-09-27 13:07:51Z

1

You should use getServerSideProps in this case. It has access to query params. On top of that you can prefetch data on the server side too.

export interface PageProps {
  id: string;
}

export function Page({ id }: PageProps ) {
  const { data } = useQuery('subjects', async () => await getSubject(id))
}

export const getServerSideProps: GetServerSideProps<PageProps > = async ({
  params,
}) => {
  const { id } = params;

  return {
    props: {
      id,
    },
  };
};

If you still want to use router, you can wait for router.isReady flag. When it is true, query params should be parsed.

answered Sep 27, 2021 at 13:07

Алексей Мартинкевич

2,1009 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to initialize router before rendering anything in Nextjs?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related