0

In the Next.js I'm working,you can get a post in the route /posts/[id].tsx ,I am using react-query to make the get request. I get the postId with

const {id}=router.query

But everytime I enter the page it sends the request to the server with undefined ,and also, do you guys know how to disable the React property of sending twice the requests when we enter a page? I think it is a waste of processing (correct me if I'm wrong please) Thank you for reading until here !!!

Julio Raposo
  • 67
  • 6

3 Answers3

3

As others have said, the value you get from useRouter().query is an empty object on the first render. The router also exposes an isReady flag to indicate that the router is ready to use. You can combine this with the enabled option of react-query to defer the actual request:

const router = useRouter()
const { id } = router.query

useQuery({
  queryKey: ['my-query', id],
  queryFn: () => fetchMyQuery(id)
  enabled: router.isReady
})

you could also pass Boolean(id) or !!id to enabled to just disable the query when you have no id for whatever reason.

TkDodo
  • 20,449
  • 3
  • 50
  • 65
2

You can use useEffect to check if the id is available, then run the rest of your code.

useEffect(() => {
    if (!id) return;
    console.log(id);
}, [id]);

If reactStrictMode in the next.config.js file is set to true, it will run your code twice. This is only in development mode.

Jay F.
  • 314
  • 4
1

to extract the value we can use a hook called useRouter from next/router. if we have a file called [newsId].tsx , we can get newsId value in the following manner.

//[newsId].tsx
import {useRouter} from 'next/router

function DetailPage(){
const router = useRouter();

//gives us the value in url

console.log(router.query.newsId;)

return <h1>hello</h1>
}
export default DetailPage

note that the double values where one is undefined is because the component is loaded initially without the value then again when it gets the value. If you want it to render once you can refer to this answer. useRouter/withRouter receive undefined on query in first render

Edtimer
  • 244
  • 3
  • 9