In electron.js I have basic component that has two useQuery hooks. When the component re-renders the hooks fire and should result in 2 calls in the network tab. However there are 3 or sometimes 4 requests. Looks like the apollo cache is not working. If remove one hook and fire the other one multiple times f.e. with lazy, there is a single network request and the cache works properly.
This issue appears in dev and in prod – after installation of the package
The component:
`const Test = () => {
console.log(‘rendering ….’);
useGetUserQuery({
variables: {
id: 'SE',
},
});
useTagsQuery();
return null;
};`
The client that is passed to the ApolloProvider wrapping the Test component
`export const useClient = () => {
const authToken = sessionStorage.getItem(‘token’);
const httpLink = createHttpLink({
uri: 'https://api',
});
const authLink = setContext((_, { headers }) => {
return {
headers: {
...headers,
authorization: authToken ? `Bearer ${authToken}` : '',
},
};
});
return {
client: new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache(),
}),
};
};`
Not sure if this is of any value but both query responses have the same parent __typename but other than that are totally different.
When I preview the Cache tab in Apollo Devtools there is only the ROOT_QUERY and it stores only the first of the two queries from my Test component.
So far I have tried:
React 16 and 18
Removing Strict Mode
Downgrading ApolloClinet to 3.3
Changing fetch and re-fetch policies
I have tried all the solution I was able to find here
I would expect one call for each hook
Thank you