Next.js : router.push not refreshing the page

Issue

I’m building a next.js page /page/data/[dataId] (this page is navigated when A user clicks on a link from page /page/data , I fetch the list of items through an API ).

When user clicks on a button , I call an API to delete this item from DB . Once the API call is successful. I need to redirect user back to /page/data page . Here’s how I’m doing it :

 async function removeData(){

    // ... some logic

    await removeData({input});
    setTimeout(()=>{
          router.push("/page/data"); // redirecting to parent
     },2000)

}

Once the user is redirected back to /page/data/ I need to refresh the list of data items bacause I want to remove the item which got deleted. Now the problem is – The /page/data/ is not getting refreshed after navigating it through router.push.

I know we can achieve this by replacing router.push to window.location="/page/data"
but that is very expensive way.

I also tried :

router.push("/page/data",undefined,{shallow:false})

but it didn’t work.

Anyone can you help me how can we achieve this in optimal way ? I find window.location approach too expensive.

Solution

To anyone else facing this issue. I fixed it by invalidating the
Query-cache of the page when we redirect from page /page/data to /page/data/[dataId]. Since we invalidated the query cache , next time when the page is loaded , the API is called again to fetch the data.

 useEffect(() => {
    return () => queryClient.invalidateQueries('dataItems');
  }, []);

Here is a working example :

Working demo

Answered By – programoholic

Answer Checked By – David Marino (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.