Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Apollo Mocked Provider Warning on refetch
See original GitHub issueI have seen a few other posts regarding fetching and MockedProvider. However I haven’t seen anyone that is getting the same warning as me.
My code executes a mutation which that uses a refetch to query for data.
const [add_emergency_contact] = useMutation(ADD_EMERGENCY_CONTACT, {
refetchQueries: [GET_PERSON_QUERY],
});
The code functions properly.
I am writing tests which mock add_emergency_contact and therefore invoke the refetch.
export function renderWithRouterMatch(
ui,
{
path = '/',
route = '/',
history = createMemoryHistory({ initialEntries: [route] }),
} = {},
) {
return {
...render(
<MockedProvider
mocks={[getPerson, add_emergency_contact, update_emergency_contact]}
addTypename={false}>
<PeopleContextProvider
value={{ personSuccessAlert, setPersonSuccessAlert }}>
<Router history={history}>
<Route path={path} component={ui} />
</Router>
</PeopleContextProvider>
</MockedProvider>,
),
};
}
describe('emergency contact tests', () => {
afterEach(cleanup);
test('add emergency contact', async () => {
const {
getByText,
queryByText,
getAllByTestId,
getByTestId,
} = renderWithRouterMatch(PersonRecord, {
route: 'people/6d6ed1f4-8294-44de-9855-2999bdf9e3a7',
path: 'people/:slug',
});
expect(getByText('Loading...')).toBeInTheDocument();
// This gives Apollo time to make the request and get mock data
await act(
async () =>
new Promise((resolve) => {
setTimeout(resolve, 0);
}),
await waitForElementToBeRemoved(() => queryByText('Loading...')),
);
const addButton = getByText('Add +');
fireEvent.click(addButton);
const inputList = getAllByTestId('form-input');
const firstNameInput = inputList[0];
const lastNameInput = inputList[1];
const primaryPhoneInput = inputList[2];
const alternatePhoneInput = inputList[3];
const emailInput = inputList[4];
const relationship = getByTestId('selector-container');
fireEvent.click(relationship);
fireEvent.click(getByText('PARENT'));
fireEvent.change(firstNameInput, { target: { value: 'Joe' } });
fireEvent.change(lastNameInput, { target: { value: 'Smith' } });
fireEvent.change(primaryPhoneInput, { target: { value: '6666666666' } });
fireEvent.change(alternatePhoneInput, {
target: { value: '6666666667' },
});
fireEvent.change(emailInput, {
target: { value: 'snoopdogg@gmail.com' },
});
const submitButton = getByText('Submit');
fireEvent.click(submitButton);
const addEmergencyContactMutationMock = add_emergency_contact.newData;
expect(addEmergencyContactMutationMock).toHaveBeenCalled();
});
});
I pass in the mocks that I will be using (getPerson is the mocked query that should be called in the refetch).
My MockedProvider uses newData rather than result. I’ve tried using both and I haven’t noticed a difference.
export const getPerson = {
request: {
query: GET_PERSON_QUERY,
variables: { id_: '6d6ed1f4-8294-44de-9855-2999bdf9e3a7' },
},
newData: jest.fn(() => ({
data: {
people: [
{
person_id: {
id_: '6d6ed1f4-8294-44de-9855-2999bdf9e3a7',
},
name: {
first_name: 'Kitty',
last_name: 'Forman',
middle_name: 'Ann',
},
preferred_name: {
first_name: 'Kit',
middle_name: 'A',
last_name: 'For',
},
emergency_contacts: [],
},
],
},
})),
// result: () => {
// return {
// data: {
// people: [
// {
// person_id: {
// id_: '6d6ed1f4-8294-44de-9855-2999bdf9e3a7',
// },
// name: {
// first_name: 'Kitty',
// last_name: 'Forman',
// middle_name: 'Ann',
// },
// preferred_name: {
// first_name: 'Kit',
// middle_name: 'A',
// last_name: 'For',
// },
// emergency_contacts: [],
// },
// ],
// },
// };
// },
};
export const add_emergency_contact = {
request: {
query: ADD_EMERGENCY_CONTACT,
variables: {
id_: '6d6ed1f4-8294-44de-9855-2999bdf9e3a7',
input: {
name: {
first_name: 'Joe',
last_name: 'Smith',
},
relationship_code: 'PARENT',
contact_info: {
primary_phone: '6666666666',
alternate_phone: '6666666667',
email: 'snoopdogg@gmail.com',
},
},
},
},
newData: jest.fn(() => ({
data: {
add_emergency_contact: {
status: 201,
error: 'none',
person_id: {
id_: '1',
},
emergency_contact: {
emergency_contact_id: {
id_: '6d6ed1f4-8294-44de-9855-2999bdf9e3a7',
},
name: {
first_name: 'Joe',
last_name: 'Smith',
},
relationship: {
code: 'PARENT',
display: null,
description: null,
},
contact_info: {
primary_phone: '6666666666',
alternate_phone: '6666666667',
email: 'snoopdogg@gmail.com',
address: {
line_1: null,
line_2: null,
city: null,
state: null,
zip_code: null,
},
},
},
},
},
})),
// result: () => {
// return {
// data: {
// add_emergency_contact: {
// status: 201,
// error: 'none',
// person_id: {
// id_: '1',
// },
// emergency_contact: {
// emergency_contact_id: {
// id_: '6d6ed1f4-8294-44de-9855-2999bdf9e3a7',
// },
// name: {
// first_name: 'Joe',
// last_name: 'Smith',
// },
// relationship: {
// code: 'PARENT',
// display: null,
// description: null,
// },
// contact_info: {
// primary_phone: '6666666666',
// alternate_phone: '6666666667',
// email: 'snoopdogg@gmail.com',
// address: {
// line_1: null,
// line_2: null,
// city: null,
// state: null,
// zip_code: null,
// },
// },
// },
// },
// },
// };
// },
};
I left the commented out code so you code see what I have attempted.
Now my tests all seem to pass however I am getting a warning when I run my tests. This warning has the same structure as my GET_PERSON_QUERY or getPerson mock.
console.warn
Unknown query {
"kind": "Document",
"definitions": [
{
"kind": "OperationDefinition",
"operation": "query",
"name": {
"kind": "Name",
"value": "People"
},
"variableDefinitions": [
{
"kind": "VariableDefinition",
"variable": {
"kind": "Variable",
"name": {
"kind": "Name",
"value": "id_"
}
},
"type": {
"kind": "NonNullType",
"type": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "String"
}
}
},
"directives": []
}
],
"directives": [],
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "people"
},
"arguments": [
{
"kind": "Argument",
"name": {
"kind": "Name",
"value": "person_id"
},
"value": {
"kind": "Variable",
"name": {
"kind": "Name",
"value": "id_"
}
}
}
],
"directives": [],
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "name"
},
"arguments": [],
"directives": [],
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "first_name"
},
"arguments": [],
"directives": []
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "middle_name"
},
"arguments": [],
"directives": []
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "last_name"
},
"arguments": [],
"directives": []
}
]
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "preferred_name"
},
"arguments": [],
"directives": [],
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "first_name"
},
"arguments": [],
"directives": []
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "middle_name"
},
"arguments": [],
"directives": []
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "last_name"
},
"arguments": [],
"directives": []
}
]
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "person_id"
},
"arguments": [],
"directives": [],
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "id_"
},
"arguments": [],
"directives": []
}
]
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "emergency_contacts"
},
"arguments": [],
"directives": [],
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "name"
},
"arguments": [],
"directives": [],
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "first_name"
},
"arguments": [],
"directives": []
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "last_name"
},
"arguments": [],
"directives": []
}
]
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "emergency_contact_id"
},
"arguments": [],
"directives": [],
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "id_"
},
"arguments": [],
"directives": []
}
]
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "relationship"
},
"arguments": [],
"directives": [],
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "code"
},
"arguments": [],
"directives": []
}
]
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "contact_info"
},
"arguments": [],
"directives": [],
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "primary_phone"
},
"arguments": [],
"directives": []
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "alternate_phone"
},
"arguments": [],
"directives": []
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "email"
},
"arguments": [],
"directives": []
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "address"
},
"arguments": [],
"directives": [],
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "line_1"
},
"arguments": [],
"directives": []
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "line_2"
},
"arguments": [],
"directives": []
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "city"
},
"arguments": [],
"directives": []
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "state"
},
"arguments": [],
"directives": []
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "zip_code"
},
"arguments": [],
"directives": []
}
]
}
}
]
}
}
]
}
}
]
}
}
]
}
}
],
"loc": {
"start": 0,
"end": 706
}
} requested in refetchQueries options.include array
at Function.warn (node_modules/ts-invariant/lib/invariant.esm.js:35:27)
at node_modules/@apollo/client/core/QueryManager.js:447:42
at Map.forEach (<anonymous>)
at QueryManager.Object.<anonymous>.QueryManager.getObservableQueries (node_modules/@apollo/client/core/QueryManager.js:445:31)
at QueryManager.Object.<anonymous>.QueryManager.refetchQueries (node_modules/@apollo/client/core/QueryManager.js:657:18)
at QueryManager.Object.<anonymous>.QueryManager.markMutationResult (node_modules/@apollo/client/core/QueryManager.js:200:18)
at node_modules/@apollo/client/core/QueryManager.js:107:49
at both (node_modules/@apollo/client/utilities/observables/asyncMap.js:16:53)
Issue Analytics
- State:
- Created 2 years ago
- Reactions:20
- Comments:9
Top Results From Across the Web
Refetching queries in Apollo Client - Apollo GraphQL Docs
In theory, you could refetch every active query after a client-side update, but you can save time and network bandwidth by refetching queries...
Read more >Is there a way to mock refetch in MockedProvider - Apollo ...
On the same principle the mock data returns "refetched" mock data. My testcode example is here it("refetch when clicked save button.
Read more >@apollo/client | Yarn - Package Manager
Apollo Client is a fully-featured caching GraphQL client with integrations for ... It allows you to easily build UI components that fetch data...
Read more >Testing React components - Apollo GraphQL Docs
In addition, Apollo Client makes network requests in order to fetch data. ... You may notice the prop being passed to the MockedProvider...
Read more >Queries – Angular - GraphQL Code Generator
Fetch data with the Apollo service. ... When you switch between views, you'll notice that the list of posts loads instantly the second...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@trevordammon did you try to change the refetchQuery of your mutation to this?
We’re also seeing this. It doesn’t seem to negatively impact anything as far as I can tell, but it’s a bit noisy to see in the test output.
Our prior expectation regarding
refetchQuerieswas that it should refetch the query if the query is currently active, but if there is no active query it just skips the refetch.We have a number of reusable components that use it this way so the fact that the query is not active is not really a concern to us… we just want it to refetch the query if active, and otherwise just do nothing.
Is there some way to just disable the console.warn here?