Gotcha, when do you call the $refetch in this case?

When you give maxAge the Infinity treatment, it's up to you to call $refetch when needed.

It could be a reload button in a data table, a pull-down trigger from an infinite loading list... etc.

it seems maxAge is not a property on useQuery if my research is right, it's in the cache?
I am not sure how I can integrate cache to my queries, the example says new Cache(... does it automagically get read by the useQuery hook?

UPDATE:
i found it in the index.ts

@vicary apologies for this barrage of questions for the last couple of days, feel like we are close to getting it to a productive state if you could just bear with us 🙏
I am still having issues with excessive refetching, your suggestions did help by changing the refetchOnRender to false and maxAge to infinity, but now that caused the query to not fetch at all after given a new id to fetch.
index.ts cache is:

const cache = new Cache(
  undefined,
  /**
   * Default option is immediate cache expiry but keep it for 5 minutes,
   * allowing soft refetches in background.
   */
  {
    maxAge: Infinity,
    staleWhileRevalidate: 5 * 60 * 1000,
    normalization: true,
  },
)

and here a snippet of the component

export function ManageAgentForm(props: Props) {
  const { session } = useQuery({
    refetchOnRender: false,
    refetchOnWindowVisible: false,
  })
  const [deleteAgent, deleteAgentState] = useMutation('deleteAgent', (isDeleted) => {
    isDeleted && props.onDelete()
  })
  const agent = session?.user.agent({ gid: props.gid })
  console.log('AGENT: ', agent?.name)

if props.gid changes, the query won't refetch, I guess this falls under the refetchOnRender flag, but if I turn that to true the component will keep re-rendering and refetching (actually sending requests infinitely).

This video shows, when refetchOnRender is false, on first load, it will fetch the data then i click around, the new data given the new id won't be fetched (shows undefined), changing to refetchOnRender to true when I click an id that is not cached, it will trigger infinite fetching.

The only way I could make it work is to do the following:

  useEffect(() => {
    $refetch()
  }, [props.gid]) // cannot add $refetch to the dependency list as it will cause infinite refetch

given the workarounds I have to do to make this common use case of "passing new id, fetch", I am sure I am missing something rather simple in my setup.

It's unclear what exactly is being fetched, would you please share a minimum reproducing repo?