apollo
apollo copied to clipboard
A reactive object inside a context of `useLazyQuery` — looped queries
Describe the bug
If you specify a reactive object for the useLazyQuery context, then if the context changes (prop of reactive object) inside the ApolloLink (specifically inside the forward function), the request will be sent again and again until the reactive data will be the same as the previous request.
It seems to me that this is erroneous behavior, because it's not variables for a graphql query.
To Reproduce
There is no simple solution to measuring the time of all graphql operations (Maybe there is, but I haven't found it).
The most trivial way to do this is to add await load() to useLazyQuery and measure time before and after its call. But i decided to use ApolloLink instead.
Steps to reproduce the behavior:
- In a
vuecomponent
const time = reactive({ start: 0, end: 0 });
const { load } = useLazyQuery(
GET_SEARCH_RESULTS,
null,
{
context: {
time,
},
}
);
- In the
ApolloLink
const timeLink = new ApolloLink((operation, forward) => {
operation.setContext((prevContext) => {
prevContext.time.start = performance.now();
console.log(prevContext);
return prevContext;
});
return forward(operation).map((data) => {
operation.setContext((prevContext) => {
// After this line, requests will be constantly sent
prevContext.time.end = performance.now();
console.log(operation.getContext());
return prevContext;
});
return data;
});
});
- call
loadfunction ofuseLazyQuery
Expected behavior I expected that changing the reactive context would not result in new and new queries if it is changed.
Versions vue: 3.3.4 @vue/apollo-composable: 4.0.0-beta.8 @apollo/client: 3.8.0
Additional context Thank you!