apollo icon indicating copy to clipboard operation
apollo copied to clipboard

A reactive object inside a context of `useLazyQuery` — looped queries

Open demershov opened this issue 2 years ago • 0 comments

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:

  1. In a vue component
const time = reactive({ start: 0, end: 0 });

const { load } = useLazyQuery(
    GET_SEARCH_RESULTS,
    null,
    {
        context: {
            time,
        },
    }
);
  1. 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;
    });
});
  1. call load function of useLazyQuery

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!

demershov avatar Aug 10 '23 19:08 demershov