Allow mocks to be reused in MockedProvider

[bhague1281]

Problem

If I want to reuse the same mock within mocks in MockedProvider, I have to duplicate it for every time I want to reuse it. For example, if I expect Query1 to be called three times with the same variables, I have to duplicate the mock in the mocks array three times. This is especially troublesome when using MockedProvider in Storybook.

Current behavior:

<MockedProvider
  mocks={[
    Query1Mock,
    Query1Mock,
    Query1Mock
  ]}
/>

Suggested Solution

Expose a flag on the MockedProvider component that allows mocks to be reused. That way, the mock doesn't need to be duplicated if it's being used more than once. Perhaps call it reuseMocks.

New Behavior:

<MockedProvider
  mocks={[Query1Mock]}
  reuseMocks
/>

[richardwu]

👍 especially when used in conjunction with pollInterval.

[geraintguan]

This would definitely be useful. I ran into this issue trying to use this for interactive components with a GraphQL backend in Storybook but you would get stuck very quickly once the provider consumed all of your mocks.

If anyone has the same issue I've worked around it by creating my own MockLink which I called StaticMockLink (implementation code is in this gist) and doesn't consume the mock responses when they are triggered. You can then easily use it in your code like so:

import { StaticMockLink } from "./StaticMockLink";

const mocks = [ /* ... mocks */ ];

const link = new StaticMockLink(mocks, true);

return (
  <MockedProvider link={link}>
    <Component />
  </MockedProvider>
);

[BradWells]

I ran into this when I made a prototype UI without a GraphQL backend. I wrapped the entire UI in a Mocked Provider and made a list of mock responses that the backend would return. Whenever playing with the UI led to the exact same GraphQL query, I got a "No more mocked responses for the query" error.

Its not a typical use-case, but I would love to just set a reuseMocks flag instead of hackily copying and pasting the responses a few times for a "good-enough" demo

[nathanredblur]

This will be so helpfull.

I would like to propose another possible way to express a reused mock.

<MockedProvider
  mocks={[
    {
    request: {
      query: QUERY,
      reuse: 0,
    },
    result: {
      data: {...},
    },
  },
  ]}
/>

Then: reuse: 0 : unlimited uses. reuse: 1 : one use (default). reuse: n : where n is the exact number of uses.

In this way, is more flexible.

[johannesfritsch]

We're having the same issue. I understand that MockedProvider was initially built for unit tests, but I don't see a problem with making it a bit more flexible. Basically we would need an "inOrder" property on the MockedProvider, which defaults to true (which would make it not break existing code). For other use cases, one could set it to false and then the lookup of the mock would search over all defined mocks for a fitting request.

[SteveyblamWork]

We use mocked provider with Storybook and it would make it a much better experience if we could re-use mocks

[alessbell]

Thanks to @sebakerckhof, this just shipped in v3.9.0-alpha.1 which can be installed with npm i @apollo/client@next 🎉

[safeamiiir]

I know this issue has been addressed, just wanted to thank you all as it really saved me time! specially @sebakerckhof!