intercept a call when a button is clicked - cypress

Question

I have the following steps
Click button
when the button is clicked, a save request is being sent
the website navigate to other page
Now I need to intercept the request sent to the backend to get information not displayed on the other page (date of appointment including timestamp and zone for instance)
I have the following code
let date = ''
cy.intercept('POST', '**/appointments/v1', (req) => {
// make an assertion on the payload contents
expect(req.body).not.to.be.null
console.log(req.body['date'])
date = req.body['date']
}).as('appointment')
cy.get('[data-cy="appointment-confirm"]').should('exist').find('button')
.click({force: true})
cy.wait('#appointment')
the request is being intercepted on the abovementioned code, but the navigation to the next page is will not take place, as I I have not clicked the button at all. The data of the request are also not saved to the backend.
I looks like the intercepted request is being stopped
I have also used
let date = ''
cy.intercept('POST', '**/appointments/v1', (req) => {
// make an assertion on the payload contents
expect(req.body).not.to.be.null
console.log(req.body['date'])
date = req.body['date']
}).as('appointment')
cy.get('[data-cy="appointment-confirm"]').should('exist').find('ion-button')
.click({force: true}).then(()=>{
cy.wait('#appointment')
})
I have also treid
cy.intercept('POST', '**/appointments/v1', (request) => {
expect(request.body).not.to.be.null
console.log(request.body['date'])
date = request.body['date']
request.continue()
}).as('appointment')
but have the same issue
I have figured out, that the intercepted request is now returning 400 Bad request

Answer 1

IMO, actually your code almost correct and I suggest you to try something like this
cy.intercept({ method: 'POST', url: '**/roles' }).as('responseRole')
// after intercept you can click the button
cy.get('button').click()
// and wait for cypress to get the result as alias
cy.wait('#responseRole').then(({ request, response }) => {
console.log(request.body)
console.log(response.body)
})

Answer 2

I tried multiple scenarios and I almost had the same issue. I changed the sequence and it worked. Such that:
Click Button
Intercept
Wait
This happens because requestTimeout of cy.wait() needs the API to fire before intercept.
For reference see here: https://docs.cypress.io/api/commands/wait#Timeouts
Your code should look like this:
let date = '';
cy.get('[data-cy="appointment-confirm"]').should('exist').find('button')
.click({force: true});
cy.intercept('POST', '**/appointments/v1', (req) => {
// make an assertion on the payload contents
expect(req.body).not.to.be.null
console.log(req.body['date'])
date = req.body['date']
}).as('appointment');
cy.wait('#appointment');