Add first draft of a GraphQL mock intercept

client/cypress/integration/frontend/instruments/instrument-page.spec.js

@@ -4,21 +4,21 @@ describe('Instruments Page', () => {
   });
 
   it('opens the instruments page', () => {
-    cy.mockGraphqlOps({
+    // cy.mockGraphqlOps({
-      operations: {
+    //   operations: {
-        MeQuery: {},
+    //     MeQuery: {},
-        InstrumentQuery: {
+    //     InstrumentQuery: {
-          instrument: {
+    //       instrument: {
-            title: 'A Guitar',
+    //         title: 'A Guitar',
-              intro: 'Money for Nothing',
+    //           intro: 'Money for Nothing',
-              contents: ''
+    //           contents: ''
-            //   id: ID!
+    //         //   id: ID!
-            //   bookmarks: [InstrumentBookmarkNode]
+    //         //   bookmarks: [InstrumentBookmarkNode]
-            //   type: InstrumentTypeNode
+    //         //   type: InstrumentTypeNode
-          }
+    //       }
-        },
+    //     },
-      },
+    //   },
-    });
+    // });
     cy.visit('instrument/blabliblablub');
 
     cy.getByDataCy('instrument-title').should('exist').should('contain', 'A Guitar');

client/cypress/support/commands.js

@@ -27,8 +27,11 @@
 // https://github.com/tgriesser/cypress-graphql-mock/issues/23
 // todo: once above issue is fixed, go back to the original repo -> npm install cypress-graphql-mock
 // import 'cypress-graphql-mock';
-import '@iam4x/cypress-graphql-mock';
+// import mocks from '../fixtures/mocks';
-import mocks from '../fixtures/mocks';
+
+import {makeExecutableSchema} from '@graphql-tools/schema';
+import {addMocksToSchema} from '@graphql-tools/mock';
+import {graphql} from 'graphql/graphql';
 
 Cypress.Commands.add('apolloLogin', (username, password) => {
   const payload = {
@@ -135,17 +138,60 @@ Cypress.Commands.add('isSubmissionReadOnly', (myText) => {
 });
 
 Cypress.Commands.add('openSidebar', () => {
-    cy.getByDataCy('user-widget-avatar').click();
+  cy.getByDataCy('user-widget-avatar').click();
 });
 
 Cypress.Commands.add('setup', () => {
   cy.fakeLogin('nino.teacher', 'test');
-    cy.server();
+  cy.viewport('macbook-15');
-    cy.viewport('macbook-15');
+  // cy.task('getSchema').then(schemaString => {
-    cy.task('getSchema').then(schema => {
+  const schemaString = `
-      cy.mockGraphql({
+    schema {
-        schema,
+      query: Query
-        mocks,
+    }  
-      });
+    
+    type Query {
+      me: PrivateUserNode 
+    }
+    
+      
+  interface Node {
+    id: ID!
+  }
+
+  type PrivateUserNode implements Node {
+    firstName: String!
+    lastName: String!
+    avatarUrl: String!
+  }
+    `;
+  const schema = makeExecutableSchema({typeDefs: schemaString});
+  const schemaWithMocks = addMocksToSchema({schema});
+
+  // cy.intercept('POST', '/api/graphql', (req) => {
+  const query = `
+ query MeQuery {
+    me {
+      firstName
+      lastName
+      avatarUrl
+    } 
+ } 
+  `;
+    // const {query, variables} = req.body;
+    // console.log(query, variables);
+    graphql({
+      schema: schemaWithMocks,
+      source: query,
+    }).then(result => {
+      console.log(result);
+      // req.reply({
+      //   data: {},
+      // });
+    }, e => {
+      console.log(e.message);
+      console.error(e);
     });
+  // });
+  // });
 });

client/mock.js

@@ -0,0 +1,29 @@
+const {readFileSync} = require('fs');
+const {resolve} = require('path');
+const {  addMocksToSchema} = require('@graphql-tools/mock');
+const { makeExecutableSchema } = require('@graphql-tools/schema');
+const { graphql } = require('graphql');
+
+const schemaString = readFileSync(
+  resolve(__dirname,'../server/schema.graphql'),
+  'utf8'
+);
+
+// Make a GraphQL schema with no resolvers
+const schema = makeExecutableSchema({ typeDefs: schemaString })
+
+// Create a new schema with mocks
+const schemaWithMocks = addMocksToSchema({ schema })
+
+const query = /* GraphQL */ `
+  query MeQuery {
+    me {
+     firstName 
+    }
+  }
+`
+
+graphql({
+  schema: schemaWithMocks,
+  source: query,
+}).then(result => console.log('Got result', result))

next-steps.md

@@ -0,0 +1,5 @@
+- install via yarn
+- try resolving the packages with `"**/graphql"` and `"graphql"` separately
+- install cypress 10 and upgrade
+- try to build the project and run statically, then load cypress, might be a webpack issue
+- try to make a separate package.json inside of the cypress folder