Apollo GraphQL useQuery hook triggered with old variables

[mjgasior]

Intended outcome:
I am trying to make some reusable Apollo hooks and simplify the APIs with some encapsulation. So my idea is to have the useQuery hook inside of a custom hook (in current case I need actually the useLazyQuery hook). The variables that come to that useLazyQuery hook change, so I need to retrigger it using either main fetch, refetch or fetchMore functions. All of them do not work properly while triggered. Code provided below.

Actual outcome:

Code provided below. So there is a range of issues:

• if I use refetch with the same id and a new date, the useLazyQuery calls for the something with the old date that was the initial one (why? no idea...)
• if I replace refetch with fetchMore in refetchSomething, the call is actually done properly AT FIRST, but then there is a weird another call without ANY actual source in that hook which calls for something with old date
• if I use getSomething in both loadSomething and refetchSomething it works like fetchMore where even tho the function was called only once, the Network tab shows two calls - one with old and second with new data.

How to reproduce the issue:

Here is a code snippet that does not work:

export const useGetSomething = () => {
  const [something, setSomething] = useState<Something>();
  const [getSomething, { data, refetch }] =
    useLazyQuery<GetSomethingHook>(GET_SOMETHING_QUERY, {
      fetchPolicy: 'no-cache',
    });

  useEffect(() => {
    if (data?.something) {
      setSomething(data.something);
    }
  }, [setSomething, data]);

  const loadSomething = useCallback(
    (id: string, date: Date) => {
      getSomething({
        variables: {
          args: {
            id,
            date,
          },
        },
      });
    },
    [getSomething],
  );

  const refetchSomething = useCallback(
    (id: string, date: Date) => {
      refetch({
        variables: {
          args: {
            id,
            date,
          },
        },
      }).then((result) => setSomething(result.data.something))
    },
    [setSomething, refetch],
  );

  return useMemo(() => {
    return {
      loadSomething,
      refetchSomething,
      something,
    };
  }, [something, loadSomething, refetchSomething]);
};

Versions

  System:
    OS: macOS 11.6.8
  Binaries:
    Node: 14.17.4 - /usr/local/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 6.14.14 - /usr/local/bin/npm
  Browsers:
    Chrome: 104.0.5112.79
    Safari: 15.6
  npmPackages:
    @apollo/client: ^3.5.8 => 3.6.9 

[kubmir]

I have exactly the same issue with fetchMore. At the first, there is right request with updated after cursor. However, then second request with stale variables is executed.

[jerelmiller]

Hey @mjgasior 👋

We've done an (almost) total rewrite of useLazyQuery that will be released in the upcoming 4.0 release. In 3.x, useLazyQuery essentially turned into useQuery after calling the execute function the first time. In 4.0 we've made it so that rerendering with new options will not cause fetches until you call execute again. I think these changes will have likely helped the issue your experiencing.

Would you be willing to try this against our 4.0.0-rc.0 release and see if it resolves your issue? Just be aware that the react hooks have been moved to @apollo/client/react so you will need to update this when upgrading.

If not, could you provide a runnable minimal reproduction of the issue? I can use that to verify if the changes in 4.0 have fixed this. Without a reproduction its difficult for me to reproduce this since I don't the shape of the data or what conditions cause this issue for you.

Thanks!

---

PS - Your code example uses a useState to track the value of something, but we'd recommend against this and instead suggest deriving that value from data. useLazyQuery will ensure that data is kept up-to-date when calling execute or refetch, even with no-cache queries, so tracking something in a separate state variable is adding additional renders that you don't need.

export const useGetSomething = () => {
  const [getSomething, { data, refetch }] =
    useLazyQuery<GetSomethingHook>(GET_SOMETHING_QUERY, {
      fetchPolicy: 'no-cache',
    });

  const loadSomething = useCallback(
    (id: string, date: Date) => {
      getSomething({
        variables: {
          args: {
            id,
            date,
          },
        },
      });
    },
    [getSomething],
  );

  const refetchSomething = useCallback(
    (id: string, date: Date) => {
      refetch({
        variables: {
          args: {
            id,
            date,
          },
        },
      })
    },
    [setSomething, refetch],
  );

  // Derive the value from `data` instead so you don't have to 
  // track this value in state.
  const something = data?.something;

  return useMemo(() => {
    return {
      loadSomething,
      refetchSomething,
      something,
    };
  }, [something, loadSomething, refetchSomething]);
};

This is unrelated to the bug, but just wanted to highlight this as a way to simplify your code!