React Apollo Error: No more mocked responses for the query: mutation
In the official docs its stated we should add addTypename={false}
to the <MockedProvider>
. And when I looked at the error message I could see that the __typename
was added to the query it was looking for.
Something like:
{ Error: Network error: No more mocked responses for the query: query getDog($dogId: ID!) {
dog(dogId: $dogId) {
name
__typename
}
}
So after removing addTypename={false}
I got another error:
Missing field __typename in {
"name": "dog"
}
Now when adding a __typename
to my mocked response it started working.
e.g.
const mocks = [
{
request: {
query: dogQuery,
variables: {
dogId: 1,
},
},
result: {
data: {
dog: {
name: 'dog',
__typename: 'Dog',
},
},
},
},
];
Related videos on Youtube
Michal
Updated on June 04, 2022Comments
-
Michal almost 2 years
Intended outcome:
MockedProvider should mock my createPost mutation.
Actual outcome:
Error: No more mocked responses for the query: mutation...
How to reproduce the issue:
I have a very simple repository. I also created a separate branch with example commit which is breaking the apollo mock provider.
1) Mutation definition is here: https://github.com/developer239/react-apollo-graphql/blob/create-post-integration-tests/src/modules/blog/gql.js#L23
export const CREATE_POST = gql` mutation createPost($title: String!, $text: String!) { createPost(title: $title, text: $text) { id title text } } `
2) The fake request is here: https://github.com/developer239/react-apollo-graphql/blob/create-post-integration-tests/test/utils/gql-posts.js#L68
export const fakeCreatePostSuccess = { request: { query: CREATE_POST, variables: { title: 'Mock Title', text: 'Mock lorem ipsum text. And another paragraph.', } }, result: { data: { createPost: { id: '1', title: 'Mock Title', text: 'Mock lorem ipsum text. And another paragraph.', }, }, },
3) The component that I am testing lives here: https://github.com/developer239/react-apollo-graphql/blob/create-post-integration-tests/src/pages/Blog/PostCreate/index.js#L24
<Mutation mutation={CREATE_POST} update={updatePostCache} onCompleted={({ createPost: { id } }) => push(`/posts/${id}`)} > {mutate => ( <> <H2>Create New Post</H2> <PostForm submit={values => mutate({ variables: values })} /> </> )} </Mutation>
4) The failing test case lives here: https://github.com/developer239/react-apollo-graphql/blob/create-post-integration-tests/src/pages/Blog/PostCreate/index.test.js#L33
describe('on form submit', () => { it('should handle success', async () => { const renderer = renderApp(<App />, ROUTE_PATHS.createPost, [ fakeCreatePostSuccess, ]) const { formSubmitButton } = fillCreatePostForm(renderer) fireEvent.click(formSubmitButton) await waitForElement(() => renderer.getByTestId(POST_DETAIL_TEST_ID)) expect(renderer.getByTestId(POST_DETAIL_TEST_ID)).toBeTruthy() }) })
It seems that I followed all steps from the official documentation but I still can't make this work. Do you have any suggestions? 🙂
-
Michal almost 5 yearsI will investigate that and approve the answer if it works. 🎉🙂