useQuery Looping

[rikotacards]

I have an api call that returns an offset value, this value is almost incrementing each time.

import { useQuery } from '@tanstack/react-query';
import { useLedgerApiClient } from '../../../contexts/LedgerApiContext';

export const useLedgerEnd: (value?: string) => number | undefined = (value?: string) => {
  const lApi = useApiClient();
  const ledgerEndQuery = useQuery({
    queryKey: ['getLedgerEnd', lApi],
    queryFn: () => ledgerApi.api().getEnd(),
  });
  return ledgerEndQuery.data?.offset;
};

I use this hook in other useQueries, for example:

export const useUserService: () =>  = () => {

  const offset = useLedgerEnd();
  return useQuery({
    queryKey: ['queryCredentialUserService', offset, ledgerApi],
    queryFn: async () => {
      return lApi.queryCredentialUserService(offset!);
    },
    enabled: !!offset,
  });
};

When my component mounts, it will call useUserService();
lets say offset is 1,

when the query state changes from isLoading = true, to false,

This would cause another re-render of my component, which would then cause useUserService() to be called again correct?
and if offset is now 2, the cache has changed, and would cause isLoading = true again ?

and then afterwards, isLoading = false, and so on.

Is my understanding correct here, that the incrementing offset value is causing the loop? and I should just remove it from they query key?

[TkDodo]

I don’t understand that code-snippet because it’s not showing the full picture. I can take a closer look if you provide a minimal, runnable reproduction in stackblitz or codesandbox.