Using fragment incorporation breaks the mocked response in GraphQL

Describe the bug

I am trying to mock Github’s public GraphQL API. I am trying to fetch public repositories. Whenever I try to incorporate a fragment on the query, something happens (still trying to understand) and the response is not properly returned.

Environment

• msw: ^0.27.0
• nodejs: v12.17.0
• npm: 6.14.4
• yarn: 1.22.5

Please also provide your browser version.

Chrome Version 88.0.4324.96 (Official Build) (x86_64)

To Reproduce

Steps to reproduce the behavior:

1. Go to the Github’ API Explorer: https://docs.github.com/en/graphql/overview/explorer
2. Do this query:

{
  search(query: "react", type: REPOSITORY, first: 10) {
    repositoryCount
    edges {
      node {
        ... on Repository {
          id
        }
      }
    }
  }
}

1. Copy and paste the response to your mock handler (file is in the end)
2. Query your mock handler with only the first line to see if everything works:

query getPublicRepositories {
  search(query: "react", type: REPOSITORY, first: 10)
}

1. It works! Nice! You can see everything is returned.
2. Now change the query. Make the same “subquery” as you have done in the explorer:

  query getPublicRepositories {
    search(query: "react", type: REPOSITORY, first: 10) {
      repositoryCount
      edges {
        node {
          ... on Repository {
            id
          }
        }
      }
    }
  }

1. Does not work anymore. The response is something like this:

{
  "search": {
    "repositoryCount": 1914858,
    "edges": [
      {
        "node": {}
      },
      {
        "node": {}
      },
      {
        "node": {}
      },
      {
        "node": {}
      },
      {
        "node": {}
      },
      {
        "node": {}
      },
      {
        "node": {}
      },
      {
        "node": {}
      },
      {
        "node": {}
      },
      {
        "node": {}
      }
    ]
  }
}

Expected behavior

I expect that it would just work as when I do not use the incorporation. Works fine if I want to mock anything that does not use incorporation.

Screenshots

Not screenshot but a payload I am using to mock:

import {graphql, setupWorker} from 'msw';

const handlers = [
  graphql.query('getPublicRepositories', (req, res, ctx) => {
    return res(
      ctx.data({
        search: {
          repositoryCount: 1914858,
          edges: [
            {
              node: {
                id: 'MDEwOlJlcG9zaXRvcnkxMDI3MDI1MA==',
                name: 'react',
                description:
                  'A declarative, efficient, and flexible JavaScript library for building user interfaces.',
                stargazerCount: 164492,
                url: 'https://github.com/facebook/react',
                updatedAt: '2021-03-03T09:27:39Z',
                owner: {
                  id: 'MDEyOk9yZ2FuaXphdGlvbjY5NjMx',
                  login: 'facebook',
                },
                repositoryTopics: {
                  nodes: [
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzQwNjE0OTY=',
                      topic: {
                        id: 'MDU6VG9waWNqYXZhc2NyaXB0',
                        name: 'javascript',
                      },
                    },
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzQwNjE0OTg=',
                      topic: {
                        id: 'MDU6VG9waWNyZWFjdA==',
                        name: 'react',
                      },
                    },
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzQwNjE1MDI=',
                      topic: {
                        id: 'MDU6VG9waWNmcm9udGVuZA==',
                        name: 'frontend',
                      },
                    },
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzQwNjE1MTk=',
                      topic: {
                        id: 'MDU6VG9waWNkZWNsYXJhdGl2ZQ==',
                        name: 'declarative',
                      },
                    },
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzQwNjE1MjE=',
                      topic: {
                        id: 'MDU6VG9waWN1aQ==',
                        name: 'ui',
                      },
                    },
                  ],
                },
                primaryLanguage: {
                  id: 'MDg6TGFuZ3VhZ2UxNDA=',
                  name: 'JavaScript',
                  color: '#f1e05a',
                },
                licenseInfo: {
                  id: 'MDc6TGljZW5zZTEz',
                  name: 'MIT License',
                },
              },
            },
            {
              node: {
                id: 'MDEwOlJlcG9zaXRvcnkxMzU3ODYwOTM=',
                name: 'react',
                description:
                  'Cheatsheets for experienced React developers getting started with TypeScript',
                stargazerCount: 22454,
                url: 'https://github.com/typescript-cheatsheets/react',
                updatedAt: '2021-03-03T09:13:59Z',
                owner: {
                  id: 'MDEyOk9yZ2FuaXphdGlvbjUwMTg4MjY0',
                  login: 'typescript-cheatsheets',
                },
                repositoryTopics: {
                  nodes: [
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzE4ODEyNDMw',
                      topic: {
                        id: 'MDU6VG9waWN0eXBlc2NyaXB0',
                        name: 'typescript',
                      },
                    },
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzE4ODEyNDMx',
                      topic: {
                        id: 'MDU6VG9waWN0eXBlc2NyaXB0LXBsYXlncm91bmQ=',
                        name: 'typescript-playground',
                      },
                    },
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzE4ODEyNDMy',
                      topic: {
                        id: 'MDU6VG9waWNyZWZlcmVuY2U=',
                        name: 'reference',
                      },
                    },
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzE4ODEyNDMz',
                      topic: {
                        id: 'MDU6VG9waWN0cw==',
                        name: 'ts',
                      },
                    },
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzE4ODEyNDM0',
                      topic: {
                        id: 'MDU6VG9waWNjaGVhdHNoZWV0',
                        name: 'cheatsheet',
                      },
                    },
                  ],
                },
                primaryLanguage: {
                  id: 'MDg6TGFuZ3VhZ2UxNDA=',
                  name: 'JavaScript',
                  color: '#f1e05a',
                },
                licenseInfo: {
                  id: 'MDc6TGljZW5zZTEz',
                  name: 'MIT License',
                },
              },
            },
            {
              node: {
                id: 'MDEwOlJlcG9zaXRvcnk3NTM5NjU3NQ==',
                name: 'react',
                description:
                  ' React+webpack+redux+ant design+axios+less全家桶后台管理框架',
                stargazerCount: 4072,
                url: 'https://github.com/duxianwei520/react',
                updatedAt: '2021-03-03T08:14:12Z',
                owner: {
                  id: 'MDQ6VXNlcjMyNDk2NTM=',
                  login: 'duxianwei520',
                },
                repositoryTopics: {
                  nodes: [
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzcwOTg4Mw==',
                      topic: {
                        id: 'MDU6VG9waWNyZWFjdA==',
                        name: 'react',
                      },
                    },
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzcwOTg4Ng==',
                      topic: {
                        id: 'MDU6VG9waWN3ZWJwYWNr',
                        name: 'webpack',
                      },
                    },
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzcwOTg4OA==',
                      topic: {
                        id: 'MDU6VG9waWNhbnRk',
                        name: 'antd',
                      },
                    },
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzcwOTg5NA==',
                      topic: {
                        id: 'MDU6VG9waWNlczY=',
                        name: 'es6',
                      },
                    },
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzcwOTg5Ng==',
                      topic: {
                        id: 'MDU6VG9waWNyZWR1eA==',
                        name: 'redux',
                      },
                    },
                  ],
                },
                primaryLanguage: {
                  id: 'MDg6TGFuZ3VhZ2UxNDA=',
                  name: 'JavaScript',
                  color: '#f1e05a',
                },
                licenseInfo: {
                  id: 'MDc6TGljZW5zZTEz',
                  name: 'MIT License',
                },
              },
            },
            {
              node: {
                id: 'MDEwOlJlcG9zaXRvcnk5MDc1OTkzMA==',
                name: 'react',
                description: 'React docs in Chinese | React 中文文档翻译',
                stargazerCount: 994,
                url: 'https://github.com/discountry/react',
                updatedAt: '2021-03-03T06:57:02Z',
                owner: {
                  id: 'MDQ6VXNlcjQ1MDcxMDE=',
                  login: 'discountry',
                },
                repositoryTopics: {
                  nodes: [
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzIzODE2NTc=',
                      topic: {
                        id: 'MDU6VG9waWNyZWFjdA==',
                        name: 'react',
                      },
                    },
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzIzODE2NTg=',
                      topic: {
                        id: 'MDU6VG9waWNkb2Nz',
                        name: 'docs',
                      },
                    },
                  ],
                },
                primaryLanguage: {
                  id: 'MDg6TGFuZ3VhZ2UxNDA=',
                  name: 'JavaScript',
                  color: '#f1e05a',
                },
                licenseInfo: {
                  id: 'MDc6TGljZW5zZTI1',
                  name: 'Creative Commons Attribution 4.0 International',
                },
              },
            },
            {
              node: {
                id: 'MDEwOlJlcG9zaXRvcnk3MjYyODI4NQ==',
                name: 'react',
                description: '京东首页构建',
                stargazerCount: 708,
                url: 'https://github.com/Cathy0807/react',
                updatedAt: '2021-03-03T03:33:32Z',
                owner: {
                  id: 'MDQ6VXNlcjIwNjUzNjQz',
                  login: 'Cathy0807',
                },
                repositoryTopics: {
                  nodes: [],
                },
                primaryLanguage: {
                  id: 'MDg6TGFuZ3VhZ2UxNDA=',
                  name: 'JavaScript',
                  color: '#f1e05a',
                },
                licenseInfo: null,
              },
            },
            {
              node: {
                id: 'MDEwOlJlcG9zaXRvcnk3NzUxMzQxOQ==',
                name: 'react',
                description: '基于react的企业后台管理开发框架',
                stargazerCount: 799,
                url: 'https://github.com/react-redux-antd-es6/react',
                updatedAt: '2021-03-03T08:22:19Z',
                owner: {
                  id: 'MDEyOk9yZ2FuaXphdGlvbjI0ODA1MTQy',
                  login: 'react-redux-antd-es6',
                },
                repositoryTopics: {
                  nodes: [
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzk0NzUwNA==',
                      topic: {
                        id: 'MDU6VG9waWNyZWFjdA==',
                        name: 'react',
                      },
                    },
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzk0NzUwNg==',
                      topic: {
                        id: 'MDU6VG9waWNhbnRk',
                        name: 'antd',
                      },
                    },
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzk0NzUwNw==',
                      topic: {
                        id: 'MDU6VG9waWN3ZWJwYWNr',
                        name: 'webpack',
                      },
                    },
                  ],
                },
                primaryLanguage: {
                  id: 'MDg6TGFuZ3VhZ2UxNDA=',
                  name: 'JavaScript',
                  color: '#f1e05a',
                },
                licenseInfo: {
                  id: 'MDc6TGljZW5zZTEz',
                  name: 'MIT License',
                },
              },
            },
            {
              node: {
                id: 'MDEwOlJlcG9zaXRvcnk5MzUwMzU0NQ==',
                name: 'React',
                description:
                  'This repository contains all the material for the HackYourFuture module "React.js: Building dynamic UIs with modern JavaScript"',
                stargazerCount: 119,
                url: 'https://github.com/HackYourFuture/React',
                updatedAt: '2021-03-03T01:45:57Z',
                owner: {
                  id: 'MDEyOk9yZ2FuaXphdGlvbjIwODU4NTY4',
                  login: 'HackYourFuture',
                },
                repositoryTopics: {
                  nodes: [
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzY0OTA3MjI=',
                      topic: {
                        id: 'MDU6VG9waWNyZWFjdA==',
                        name: 'react',
                      },
                    },
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzY0OTA3MjM=',
                      topic: {
                        id: 'MDU6VG9waWNtb2J4',
                        name: 'mobx',
                      },
                    },
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzY0OTA3MjQ=',
                      topic: {
                        id: 'MDU6VG9waWNoeWY=',
                        name: 'hyf',
                      },
                    },
                  ],
                },
                primaryLanguage: null,
                licenseInfo: null,
              },
            },
            {
              node: {
                id: 'MDEwOlJlcG9zaXRvcnkyNDgyOTUxNzA=',
                name: 'react',
                description: 'Modern and minimalist React UI library.',
                stargazerCount: 1541,
                url: 'https://github.com/geist-org/react',
                updatedAt: '2021-03-03T00:10:27Z',
                owner: {
                  id: 'MDEyOk9yZ2FuaXphdGlvbjY5ODQ4NzUy',
                  login: 'geist-org',
                },
                repositoryTopics: {
                  nodes: [
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzE2MTI0NDEy',
                      topic: {
                        id: 'MDU6VG9waWNyZWFjdC1jb21wb25lbnRz',
                        name: 'react-components',
                      },
                    },
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzE2MTI0NDE1',
                      topic: {
                        id: 'MDU6VG9waWNyZWFjdA==',
                        name: 'react',
                      },
                    },
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzE4MjA1OTE5',
                      topic: {
                        id: 'MDU6VG9waWNnZWlzdA==',
                        name: 'geist',
                      },
                    },
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzE4MjA4NTEw',
                      topic: {
                        id: 'MDU6VG9waWNkZXNpZ24tc3lzdGVt',
                        name: 'design-system',
                      },
                    },
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzE4MjA4NTE1',
                      topic: {
                        id: 'MDU6VG9waWNnZWlzdC11aQ==',
                        name: 'geist-ui',
                      },
                    },
                  ],
                },
                primaryLanguage: {
                  id: 'MDg6TGFuZ3VhZ2UyODc=',
                  name: 'TypeScript',
                  color: '#2b7489',
                },
                licenseInfo: {
                  id: 'MDc6TGljZW5zZTEz',
                  name: 'MIT License',
                },
              },
            },
            {
              node: {
                id: 'MDEwOlJlcG9zaXRvcnkzNjA2NjI0',
                name: 'ReactiveCocoa',
                description:
                  'Cocoa framework and Obj-C dynamism bindings for ReactiveSwift.',
                stargazerCount: 19946,
                url: 'https://github.com/ReactiveCocoa/ReactiveCocoa',
                updatedAt: '2021-03-03T08:22:19Z',
                owner: {
                  id: 'MDEyOk9yZ2FuaXphdGlvbjM0MjI5Nzc=',
                  login: 'ReactiveCocoa',
                },
                repositoryTopics: {
                  nodes: [
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzMwODcyMQ==',
                      topic: {
                        id: 'MDU6VG9waWNyZWFjdGl2ZXN3aWZ0',
                        name: 'reactiveswift',
                      },
                    },
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzMwODcyMg==',
                      topic: {
                        id: 'MDU6VG9waWNyZWFjdGl2ZWNvY29h',
                        name: 'reactivecocoa',
                      },
                    },
                    {
                      id: 'MDE1OlJlcG9zaXRvcnlUb3BpYzM4NjgzNw==',
                      topic: {
                        id: 'MDU6VG9waWNzd2lmdA==',
                        name: 'swift',
                      },
                    },
                  ],
                },
                primaryLanguage: {
                  id: 'MDg6TGFuZ3VhZ2UzNzE=',
                  name: 'Swift',
                  color: '#ffac45',
                },
                licenseInfo: {
                  id: 'MDc6TGljZW5zZTA=',
                  name: 'Other',
                },
              },
            },
            {
              node: {
                id: 'MDEwOlJlcG9zaXRvcnkyOTAyODc3NQ==',
                name: 'react-native',
                description: 'A framework for building native apps with React.',
                stargazerCount: 93666,
                url: 'https://github.com/facebook/react-native',
                updatedAt: '2021-03-03T09:11:11Z',
                owner: {
                  id: 'MDEyOk9yZ2FuaXphdGlvbjY5NjMx',
                  login: 'facebook',
                },
                repositoryTopics: {
                  nodes: [],
                },
                primaryLanguage: {
                  id: 'MDg6TGFuZ3VhZ2UxNDA=',
                  name: 'JavaScript',
                  color: '#f1e05a',
                },
                licenseInfo: {
                  id: 'MDc6TGljZW5zZTA=',
                  name: 'Other',
                },
              },
            },
          ],
        },
      }),
    );
  }),
];

export const worker = setupWorker(...handlers);

[kettanaito]

Thank you for the follow-up. Queries are good, the main interest goes to which GraphQL client you’re u sing. It appears that’s Apollo. There’s a nuance with Apollo where it expects the data you return to have the __typename property describing the type of the data. Apollo is likely to strip the data that doesn’t have the __typename property, that’s why this scenario works fine in isolation but results in empty nodes with queried with Apollo.

We mention this in the GraphQL integration, but it’s not the most evident issue to catch.

I don’t see any explicit __typename when inspecting the GitHub Explorer’s response, so I may only suggest adding this to your nodes in the mocked data:

{
  node: {
    __typename: 'Repository',
    // ...the rest of properties you have (i.e. "id", "description", etc.)
  }
}

Could you please try this and let me know?

[gabrielhpugliese]

Many thanks @kettanaito and @netcoding87 . I will try it whenever possible, right now I am really busy! But thanks again!