tgriesser / cypress-graphql-mock

Adds commands for executing a mocked GraphQL server using only the client
171 stars 43 forks source link

Mock data always return "Hello World" #37

Open gmoura opened 4 years ago

gmoura commented 4 years ago

Hi guys, I'm quite new in GraphQL world and currently I'm facing some difficulties/trouble trying to implement this plugin, If anyone can help, I'll be really thankful .

Problem:

All my mock data fields are returning Hello World

How I'm using this plugin:

In my integration/index.spec.js

  context('Get email', () => {
      beforeEach(() => {
          cy.server();
          cy.mockGraphql({ schema });
          cy.mockGraphqlOps({
              operations: {
                GetEmail: {
                  email: "gmoura.nas@gmail.com",
                }
              }
          })
      });

        it('Should mock graphql', () => {
          cy.visit('/')
        })
  })

But I get

{
  GetEmail: {
    email: 'Hello World'
  }
}

Thanks guys ❤️

jfairley commented 4 years ago

@gmoura responding with "Hello World" is actually some default functionality in Apollo Server. I was just having this issue, too. For me, the real issue was that cypress-graphql-mock wasn't configured correctly. Also make sure your object structure in cy.mockGraphqlOps matches the request you're making.

sarink commented 4 years ago

Can @jfairley / anyone elaborate? In what way is the OP's code configured incorrectly?

jfairley commented 4 years ago

@sarink

Since it's an API mock, it could be a number of things, but would depend on the larger context of @gmoura's app.

The big takeaway is that it seems that cypress-graphql-mock is actually intercepting the request, because apollo-server is responding, but something about the cy.mockGraphqlOps probably doesn't match the request that's sent out.

If I had to guess, it looks like @gmoura is missing a level in that structure.

For example, I have a mocked request in my app like this:

      cy.mockGraphqlOps({
        operations: {
          Partner: {
            partnersRates: [
              /* data */

which corresponds to

export const HIERARCHIES = gql`
  query Partner($parentId: Float!) {
    partnersRates(parentId: $parentId) {

In this case, partnersRates is the graphql operation as defined on the server, while Partner is simply how I named the query on the client via query Partner.

Sometimes these names are the same, but that's why I say "it depends".

Possibly, what @gmoura needs is the following, but it's impossible to know without seeing the source query in the client code.

          cy.mockGraphqlOps({
              operations: {
                GetEmail: {
                  GetEmail: {
                    email: "gmoura.nas@gmail.com",
                  }
                }
              }
          })