Apollo-client: Impossible to test loading states in storybook using `MockedProvider`

[bebbi]

Intended outcome:

I need to show a component's loading state in storybook.

I followed exactly the instructions and code for MockedProvider in the apollo docs here.

Then I tried with a custom mock:

  {
    request: {
      query: GET_DOG_QUERY,
      variables: {
        name: 'Buck',
      },
    result: {
      loading: true,
      data: {}
    },
  },

Actual outcome:

There is a brief flash of the component in its loading state.
Then the loading param in the useQuery hook invariably turns to false, giving no way to display a storybook component in its loading state.

How to reproduce the issue:

Use the code in the linked documentation under "Testing loading states".
Optionally change the mock to the definition above.

Versions

System:
OS: macOS 10.15.4
Binaries:
Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
Yarn: 1.22.0 - ~/.yarn/bin/yarn
npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm
Browsers:
Chrome: 81.0.4044.138
npmPackages:
@apollo/react-hooks: ^3.1.5 => 3.1.5
@apollo/react-testing: ^3.1.4 => 3.1.4
apollo-cache-inmemory: ^1.6.6 => 1.6.6
apollo-client: ^2.6.10 => 2.6.10
apollo-link: ^1.2.14 => 1.2.14

[freshollie]

Setting delay: 10000000 will probably achieve what you are looking for.

See definitions: https://github.com/apollographql/apollo-client/blob/3d48f9fc7d07d8170c5b906b6e93bf0400aa2698/src/utilities/testing/mocking/mockLink.ts#L21

....
  request: GraphQLRequest;
  result?: FetchResult<TData> | ResultFunction<FetchResult<TData>>;
  error?: Error;
  delay?: number;
  newData?: ResultFunction<FetchResult>;
}

[bebbi]

Great, that works out - thanks!