Is there any way I can wait for the gql api request in cypress?

Question

I am completely new to Cypress. I am trying a way to wait for the gql API response before I want my test to run. For instance, when I visit a page /users, the gql call is made to fetch the list of users, only after the call is resolved, we display the user profiles on the page. So, in order to test if the user profiles get displayed properly, I need to wait for the API response. Currently, I am using cy.wait(10000) to get around that problem. But, obviously that is very bad, tests won't pass sometime because the API call isn't finished within 10 seconds. There is also another way that works.

cy.request({
 url :"gql-url",
 body :{query :`query`}
})
.then(res => **write the test here**)

If I do like above, it does work. But, I am not sure if that is a good approach since I don't see anyone mentioning to do it that way.I have been looking for solution to this problem for ages. I would appreciate it if you can help me out.

Answer 1

You could put an alias on the the request, then wait for the alias and the test will take just as long as the request takes (at least the waiting part).

cy.request({
 url :"gql-url",
 body :{query :`query`}
})
.as('gql')

cy.wait('@gql')
  .then(res => {
    // anything that needs res
  })

// other things that don't need res
cy.get('ul#users')...

Answer 2

I have exactly the same case, and I resolved the issue by using intercept (Waiting-on-a-request).

// Update 'GET' method and uri '/users' accordingly to your app. You can check logs of Cypress runner for these information.
cy.intercept('GET', '/users').as('getAllUsers') 
cy.request({
 url :"gql-url",
 body :{query :`query`}
})
cy.wait('@getAllUsers')