useLazyQuery won't update execute function when gql changes

[oychao]

// ...
import {
  gql,
  useLazyQuery,
} from '@apollo/client';

export function useMyBusinessRequest () {
  const [dynamicGqlTemplate, setDynamicGqlTemplate] = useState('some gql');
  const [request, model] = useLazyQuery(gql(dynamicGqlTemplate));

  return { setDynamicGqlTemplate, request, model, };
}

request won't get updated when I call setDynamicGqlTemplate.

It seems request is decorated with useCallback, is this design deliberate?

Intended outcome:

request get updated when dynamic gql template changes.

Actual outcome:

Here is the implementation of useLazyQuery.

  const execute = useCallback<
    LazyQueryResultTuple<TData, TVariables>[0]
  >(executeOptions => {
    execOptionsRef.current = executeOptions ? {
      ...executeOptions,
      fetchPolicy: executeOptions.fetchPolicy || initialFetchPolicy,
    } : {
      fetchPolicy: initialFetchPolicy,
    };

    const promise = internalState
      .asyncUpdate() // Like internalState.forceUpdate, but returns a Promise.
      .then(queryResult => Object.assign(queryResult, eagerMethods));

    // Because the return value of `useLazyQuery` is usually floated, we need
    // to catch the promise to prevent unhandled rejections.
    promise.catch(() => {});

    return promise;
  }, []);

see useLazyQuery.ts#74

How to reproduce the issue:

see above.

Versions

3.7.0

[oychao]

I detected the problem, internalState in execute is stale.

Is apollo/client going to update this implementation in future releases?

[jerelmiller]

Hey @oychao 👋

We just released v3.7.11 which now allows you to use dynamic queries. The execute function will now use the most recently passed query document to the hook.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.