apollographql / apollographql/apollo-client

MockedProvider matches queries with fragments only if fragments are included in the same order as they're used

Open
#7,724 0 comments 3 reactions 0 assignees View on GitHub
🔬 testing-utilities 😍 pull-requests-welcome
Dominant language
TypeScript
Stars
19.8k
Forks
2.9k
Avg merge
11h 14m
Merged PRs (30d)
18

Description

**Intended outcome:**

`MockedProvider` should successfully match the mock to the query regardless of where fragments are included (`${...}`) in the query.

**Actual outcome:**

Mock is not returned by `MockProvider`. The hook `{ data, error } = useQuery(...)` retruns `data === undefined` and `error === null`

**How to reproduce the issue:**

This query works using the "standard" provider in production, but fails to match when using `MockProvider`

```graphql
query FileUploadPage($hash: String!) {
currentAccount: getCurrentAccount {
...FileUploadCard_Account
}
dataProvider: getDataProviderByHash(hash: $hash) {
id
name
isEnabled
dataSources {
items {
...FileUploadCard_DataSource
}
}
uploadPage {
welcomeText
}
version
}
}

${FileUploadCardDataSourceFragment}
${FileUploadCardAccountFragment}
`;
```

Flipping the order in which fragments are included will make it work:

instead of

```graphql
${FileUploadCardDataSourceFragment}
${FileUploadCardAccountFragment}
```

use

```graphql
${FileUploadCardAccountFragment}
${FileUploadCardDataSourceFragment}
```

**Versions**
```
System:
OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
Binaries:
Node: 15.8.0 - /usr/bin/node
Yarn: 1.22.5 - /usr/bin/yarn
npm: 7.5.1 - /usr/bin/npm
Browsers:
Chrome: 88.0.4324.150
Firefox: 85.0.1
npmPackages:
@apollo/client: ^3.2.1 => 3.3.7
apollo-link-schema: ^1.2.4 => 1.2.5
apollo-link-serialize: ^3.1.1 => 3.1.1
apollo-sentry-link: ^1.2.1 => 1.2.1
react-apollo: ^2.5.8 => 2.5.8
storybook-addon-apollo-client: ^4.0.3 => 4.0.6
```

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the reported query with MockedProvider, using the two fragment inclusion orders shown in the issue, and compare the matching behavior with the standard provider. The issue is done when MockedProvider returns the mock successfully regardless of fragment order, without changing the production query.

Written by the indexing model from the issue text.

Assessment

Tech stack
graphql, typescript
Domain
testing-qa
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.