Use Graphql mutation in Cypress command

Question

I want to add a cy.signUp command to Cypress in the commands.js file. The frontend app uses Graphql with React to communicate with the backend app.

I can't figure out a way to use a mutation inside of the commands.js file since the documentation only offers to use it with React.

How can I use graphql inside of this file to add a new command based on a mutation?

Does this answer your question? [Call GraphQL endpoints using Cypress .request](https://stackoverflow.com/questions/49988215/call-graphql-endpoints-using-cypress-request) — jonrsharpe, Feb 08 '21 at 09:25
Or https://stackoverflow.com/q/51012988/3001761 maybe - basically look at the request that's being made and create the same thing with `cy.request`. — jonrsharpe, Feb 08 '21 at 09:26
@jonrsharpe I saw that post, but it's a workaround, not a solution actually using Graphql — Graham Slick, Feb 08 '21 at 09:31
What do you think *"actually using Graphql"* means? It's just a query language, in this case using HTTP as the transport and likely following the conventions in https://graphql.org/learn/serving-over-http/. — jonrsharpe, Feb 08 '21 at 09:34
Sorry I wasn't clear - I mean executing the query through the actual mutation without having to rebuild the query "manually". If for any reason the mutation has to change, I'll have to change the cypress command. It just duplicates code and makes it more difficult to maintain. — Graham Slick, Feb 08 '21 at 09:36
Based on the link I guess by *"the actual mutation"* you mean Apollo; note that's just a JS library for creating the query with various clients to make the requests, I don't know if there's a Cypress client to use `cy.request` for transport. You could decouple your tests from GraphQL entirely by using the UI to log in - I know the Cypress folks [consider that an anti-pattern](https://docs.cypress.io/guides/references/best-practices.html#Organizing-Tests-Logging-In-Controlling-State), but your users shouldn't have to care how you're organising the API so neither should your E2E tests. — jonrsharpe, Feb 08 '21 at 10:02

score 1 · Answer 1 · answered Feb 10 '21 at 16:50

1

Here is what has worked for me:

const mutation = `
mutation {
  // whatever you have for the mutation
}
`
cy.request({
  url: '/',
  method: 'POST',
  body: {
    query: mutation
  }
});

answered Feb 10 '21 at 16:50

cdcastillo

128
4

score 0 · Answer 2 · answered Jun 24 '21 at 21:42

I recently had this issue and I was able to resolve this by adding a command in the command.js in cypress's support folder.

Cypress.Commands.add('apiMutation', (mutations) => {
    cy.request({
        method:'POST',
        url:'api/graphql',
        body: { query : "mutation" + mutations }         
    })
})

The problem is that cy.request requires you to have a query inside the body or ofcourse that's what I feel.

You can override this by add the word mutation inside the body before the actual query(mutation). Like below

body: { query : "mutation" + mutations }

And you can make your request like:

describe("Reservation Validations", () => {
     it("should return a valid addAdditions mutation", () => {
        cy.apiMutation('{addAdditions(reservationId: 1001 reservedResourceId: 100 additions: { resourceId: 10 quantity: 12 }){resourceId  type resortArticle}}'
        ).then((Response) => {
            expect(Response.body.data).to.have.property("addAdditions")
            expect(Response.body.data.addAdditions).to.not.be.undefined
        })
    })
})

Use Graphql mutation in Cypress command

2 Answers2