brapifra
commented
4 years ago Hey @kettanaito! I would love to help you with this. I was initially experimenting with the idea of building something on the top of msw, but I think it makes sense to add it as part of the library. Also, it should be quite straightforward to implement!
Experiment
```javascript const { makeExecutableSchema, addMocksToSchema } = require('graphql-tools'); const { graphqlSync } = require('graphql'); const { graphql } = require('msw'); const { setupServer } = require('msw/node'); const { default: ApolloClient, gql } = require('apollo-boost'); const merge = require('lodash/merge'); const fetch = require('node-fetch'); // Creates a basic schema with mocks function getSchemaWithMocks() { const schemaString = ` type User { id: Int!, name: String! } type Query { user(id: Int): User! } `; const schema = makeExecutableSchema({ typeDefs: schemaString }); const schemaWithMocks = addMocksToSchema({ schema }); return schemaWithMocks; } const schemaWithMocks = getSchemaWithMocks(); // Setup server const server = setupServer( graphql.query('getUser', (req, res, ctx) => { const { data, errors } = graphqlSync(schemaWithMocks, req.body.query); if (errors) { return res(ctx.errors(errors)); } return res( ctx.data(merge(data, { user: { name: 'This is a custom name' } })) ); }) ); server.listen(); // Create graphql client const client = new ApolloClient({ uri: 'https://fake_domain.com/graphql', fetch, }); // Query user client .query({ query: gql` query getUser { user(id: 6) { id name } } `, }) .then((res) => console.log(res)) .catch((error) => console.log(error)); ```I've also come up with a potential API that msw could provide:
Potential API
```javascript const { graphql } = require('msw'); const { setupServer } = require('msw/node'); const { default: ApolloClient, gql } = require('apollo-boost'); const fetch = require('node-fetch'); const { privateSchemaWithMocks, publicSchemaWithMocks, } = require('./schemasWithMocks'); const PRIVATE_SCHEMA_ENDPOINT = 'https://fake_domain.com/graphql'; const PUBLIC_SCHEMA_ENDPOINT = 'https://public_fake_domain.com/public/graphql'; // Setup server // The new graphql.schema handler returns a GraphQLSchema that will then // be used by msw to get an initial mocked response. // It's valuable to be able to return a different schema dynamically // for projects that use more than 1 graphql endpoint/schema const server = setupServer( graphql.schema((request) => { if (request.url.origin === PRIVATE_SCHEMA_ENDPOINT) { return privateSchemaWithMocks; } return publicSchemaWithMocks; }), graphql.query('getUser', (req, res, ctx) => { // The response here can be partial because msw is going to merge it // with the mocked response provided by the above schema return res( ctx.data({ user: { name: 'This is a custom name' } }) ); }) ); server.listen(); // Create private graphql client const privateClient = new ApolloClient({ uri: PRIVATE_SCHEMA_ENDPOINT, fetch, }); // This will be replied with the mocked data from privateSchemaWithMocks privateClient .query({ query: gql` query getUser { user(id: 6) { id name } } `, }) .then((res) => console.log(res)) .catch((error) => console.log(error)); // Create public graphql client const publicClient = new ApolloClient({ uri: PUBLIC_SCHEMA_ENDPOINT, fetch, }); // This will be replied with the mocked data from publicSchemaWithMocks publicClient .query({ query: gql` query getUser { user(id: 6) { id name } } `, }) .then((res) => console.log(res)) .catch((error) => console.log(error)); ```Let me know what are your thoughts on this! And if you are happy, I'm keen on creating a PR for it!
kettanaito
sibelius
garhbod
Is your feature request related to a problem? Please describe. Right now you need to mock the whole GraphQL response like this https://github.com/mswjs/msw/blob/e31a344332f5951177bb17655a82c7cefe59445e/test/graphql-api/query.mocks.ts
Describe the solution you'd like The idea is to only mock the types and fields that you need in your test
Describe alternatives you've considered I've been using
relay-testing-utilsto mock only parts of my GraphQL response https://relay.dev/docs/en/testing-relay-components We can also use graphql-tools mocking approach (https://www.apollographql.com/docs/graphql-tools/mocking/)Additional context This is based on a twitter discussion (https://twitter.com/sseraphini/status/1264877251587432448) about graphql-mock-api