Are dynamic mocks possible in storybooks using Apollo's MockedProvider? - graphql

Question

In my React storybooks, I want to be able to toy around with components that use graphQL queries and mutations (implemented with Apollo).
This works fine using MockedProvider, as long as I specify in-advance the exact mutations, including their inputs.
I want to know if it is possible/how to not specify the inputs in advance, to accept any inputs.
export const MyComponent = () => (
<Mutation mutation={gql`some mutation`}>
{(doMutation, { loading, error, data }) => (
<Button onClick={()=> doMutation({input: {
someInput: Math.rand()*10 // Would be fine if this was 1.
}}) />
{data ? <>Result: {data.someResult}</> : null}
)
</Mutation>
)
storiesOf('MyComponent', module)
.add('some story', () => (
<StaticRouter context={{}}>
<MockedProvider
mocks={[
{
request: {
query: gql`some query...`,
variables: { input: { someInput: '1' } },
},
result: { data: { someResult: '1' } },
},
]}
addTypename={true}
>
<MyComponent />
</MockedProvider>
</StaticRouter>
))
In the pseudo-example above, the storybook will work fine if I send '1' as my input, but will not work for any other number - the mock must match exactly or I get "no more mocked responses for someMutation with variables {...}".
This is not a problem in tests, but in storybooks it'd be nice to be able to test with any values.

Answer 1

I found a way to do what I wanted, albeit not using MockedProvider.
First, convert to hooks.
export const MyComponent = () => {
const [doMutation, {loading, data, error}] = useMutation(gql`some mutation`)
return (
<Button onClick={()=> doMutation({input: {
someInput: Math.rand()*10 // Would be fine if this was 1.
}}) />
{data ? <>Result: {data.someResult}</> : null}
);
}
Now dependency-inject the mutation hook, using react-magnetic-di
export const useMyMutation = () => useMutation(gql`some mutation`)
export const MyComponent = () => {
di(useMyMutation)
const [doMutation, {loading, data, error}] = useMyMutation() // Will be the in-scope variable `useMyMutation` from above unless expressly injected during stories/tests.
return (
<Button onClick={()=> doMutation({input: {
someInput: Math.rand()*10 // Would be fine if this was 1.
}}) />
{data ? <>Result: {data.someResult}</> : null}
);
}
Now you can write stories/tests with custom implementations.
export const useMockMyMutation = injectable(
myMutation, // imported from the component, types are checked against it.
() => [function thisWillBeDoMutation(){}, {loading: false, data: {}, error: null}])
storiesOf('MyComponent', module)
.add('some story', () => (
<StaticRouter context={{}}>
<DiProvider target={MyComponent} use={[useMockMyMutation]}>
<MyComponent />
</DiProvider>
</StaticRouter>
))
So we directly supply any function for the doMutation, and you can make that change the values used for loading/data/error etc. if you need to.
We've made a lot of tooling to make it a bit more streamlined, so extracting this example was a bit tricky so you'll need to do a bit of playing around with react-magnetic-di; but this is the gist of it.
Good luck!