5

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.

programoholic
  • 4,830
  • 5
  • 20
  • 59
  • 1
    Can you clarify exactly what you mean by "The parent is not getting refreshed after navigating [to] it..."? What needs to be refreshed? Is the parent component already mounted and just needs to refetch something? Can you include all the relevant code you are working with? https://stackoverflow.com/help/minimal-reproducible-example – Drew Reese May 26 '22 at 15:05

3 Answers3

2

The workaround I have found is to add a query parameter.

For example:

router.push({ pathname: "/page/data", query: { u: "true" } });

So it will redirect to /page/data?u=true and the presence of the query param will force a new getServerSideProps call. I just chose u to signify "update". This works for me but I realise it's a bit of a hack.

In response to the other answer, it's not limited to deleting an element without a page reload. In my case, I navigate from a page of many items to a separate page to create a new item. On submitting the form on this separate page, I redirect with router.push to the index page, but the new item is not there. I am not sure your suggestion is suitable in this instance.

themm
  • 21
  • 4
0

I think it is because Next not fetching new data from the server when you navigate to the previous page. You can use router.reload() for hark reload, but instead after deleting an item from DB, you can try to update your local data with something like newData = oldData.filter(data => data !== deletedData) instead of fetching it from the server. You shouldn't reload an application after the initial render, in common.

Alexander Kim
  • 1
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 28 '23 at 00:05
-3

I have used this method in the past, like you say it may be an expensive approach but it keeps the routing without 'next router' compared to moving part of the routing to window.location.

router.push('ROUTE').then(() => window.location.reload())

Next router also has a reload function that could be called, but it still uses the principles of after the route.

router.push('ROUTE').then(() => router.reload())
Jake
  • 130
  • 3
  • If we are moving to a new page , isn't `router` going to be destroyed ? I mean can refresh parent from child page ? – programoholic May 26 '22 at 12:28
  • I have just tried routing with `router.reload()` after and it doesn't have an issue even though you are routing to a new page that may not have the router imported on. – Jake May 26 '22 at 12:40
  • Sorry but it is similar to window reload, this will be my last option. – programoholic May 26 '22 at 12:55