Cypress: Wait for all requests to /graphql endpoint

user_1778465 0
Viewed 945

I am trying to add a wait to all requests to /graphql. I would like the requests to automatically wait. However, I am getting the following error:

Cypress detected that you returned a promise from a command while also invoking one or more cy commands in that promise.

I have tried multiple ways to add it (Note I am setting the alias as mentioned here):

Before(() => {
  cy.intercept('POST', '**/graphql', handleGraphql);
});

function handleGraphql(req) {
  req.alias = `gql${req.headers['query-id']}Query`;

  // The different ways that I have tried:
  setTimeout(() => cy.wait(`@gql${req.headers['query-id']}Query`), 100);
  new Cypress.Promise(() => cy.wait(`@gql${req.headers['query-id']}Query`))
}

I then have also tried this function:

function handleGraphql(req) {
  req.alias = `gql${req.headers['query-id']}Query`;
  cy.wait(`@gql${req.headers['query-id']}Query`);
}

but then I get the following error:

Timed out retrying after 5000ms: cy.wait() timed out waiting 5000ms for the 1st request to the route: gql9b93b362-d715-4aae-928b-71b406381350Query. No request ever occurred.

I found that you can add some events to the req, but none of them seem to do what I want, as I am getting the returned a promise error from above.

function handleGraphql(req) {
  req.alias = `@gql${req.headers['query-id']}Query`;
  req.continue(() => {
    cy.wait(`@gql${req.headers['query-id']}Query`);
  });
}
cypress javascript
1 Answers

Cypress detected that you returned a promise from a command... refers to the fact that you are waiting on the intercept alias within the handler.

Since the handler is event response code, the usual pattern is

cy.intercept(...)  // set up the listener

cy.visit(...)  // trigger the events (might also be from UI event like click())

cy.wait('@my-alias')

But this means the aliases should be known ahead of time.

Simplest is if you can find out all the ids,

const aliases = ['1', '2', '3'].map(id => `@gql${id}Query`)

const handleGraphql = (req) => req.alias = `gql${req.headers['query-id']}Query`;

before(() => {
  cy.intercept('POST', '**/graphql', handleGraphql)  // set up the listener
})

it('waits for all ids', () => {
  cy.visit(...)  // trigger the events (might also be from UI event like click())

  cy.wait(aliases)
}

If you can't be specific about the ids, then you either need to wait an arbitrary time for all requests to happen (which is flaky if the wait is too short, or annoying if the wait is too long) or assert an element or other DOM artefact that only appears after all requests are finished.

Your id's are generated, so don't use them in the alias. Use a "generic" alias and wait for the required count

const calls = 4

before(() => {
 cy.intercept('POST', '**/graphql').as('gqlQuery')
})

it('waits for all ids', () => {
 cy.visit(...)  // trigger the events (might also be from UI event like click())

 cy.wait(`@gqlQuery.${calls}`)
}

There's some warnings around the alias.n syntax being undocumented, but you could substitute

Cypress._.times(calls, () => cy.wait('@gqlQuery'))
user_169977070
Related