Function running before my request response

Question

In a modal I have a form with data that can be edited. If the user confirms the update the data is updated and then it will be forwarding the new page. But on this new page the information that appears is still the old information (before the update). If I give an F5 the new information appears.

Information before updating

New information

Information that appears at the first moment when I confirm the update.

After F5

Follow the code below:

updateClonedQuote(): void {
    this.canDeactivate = false
    const updateQuote = this.cloneQuoteForm.getRawValue() as ClonedQuoteValue
    this.quoteService.updateQuote(updateQuote, this.dataClonedQuote.id)
      .subscribe(
        () => {},
        (err) => console.log(err),
        () => {
          this.modalService.dismissAll()
          this.route.navigate(['quotes-abertas/', this.dataClonedQuote.id])
        }
      )
  }

Answer 1

Checks that the browser is not "caching" the request to the server. If it is, it will always return the same data, because the browser thinks you are asking for exactly the same information.

If this is the case, you can add a random value at the end of the url for the browser to think that it is always a new request, as for example

// random number between 0 and 999
const version = Math.floor(Math.random() * 1000);
const requestEndpoint = `https://endpoint.com/api/quotes?=v${version}`

This way the request is always difference.