GQL query is not being intercepted even though it is fired using graphql-test-utils.js

[pmerwin]

Here is a demo of the issue:

https://share.getcloudapp.com/JruxdoqQ

sample code:

test:

import { aliasQuery } from '../util/graphql-test-utils'

context('Test that a user can get to bookshelf content', () => {
beforeEach(() => {
const contentAPI = 'https://api.adept.at/content/graphql';
cy.intercept('POST', contentAPI, (req) => {
aliasQuery(req, 'getBookshelves')
});
});
it('Can see open bookshelf and see assigned content', () => {
cy.login().verifyMyStats();
cy.get('[aria-label="Open left navigation bar"]').click()
cy.get('[href="/bookshelves"]').click();
cy.wait('@GQLgetBookshelves', {timeout: 30000});
cy.get('[aria-label="Close left navigation bar"]').click();
cy.get('[aria-label="subheader for main content actions"]');
cy.contains('Assigned to me');
cy.url().should('include', '/bookshelves');
});
});

utility:

// Utility to match GraphQL mutation based on the operation name
export const hasOperationName = (req, operationName) => {
const { body } = req
return (
body.hasOwnProperty('operationName') && body.operationName === operationName
)
}

// Alias query if operationName matches
export const aliasQuery = (req, operationName) => {
if (hasOperationName(req, operationName)) {
req.alias = GQL${operationName};

}
}

// Alias mutation if operationName matches
export const aliasMutation = (req, operationName) => {
if (hasOperationName(req, operationName)) {
req.alias = GQL${operationName};
}
}

[pmerwin]

hmm I think I solved this, our endpoints do not have an operationName prop all the time so I tried this:

Cypress.Commands.add('interceptGQL', (opName, route) => {
cy.intercept('POST', https://api.adept.at/${route}/graphql, req => {
const { body } = req;
console.log(body.query);
if (body.hasOwnProperty('query') && body.query.includes(opName)) {
req.alias = opName;
}
});
});