Excessive fetching

[hyusetiawan]

What's the lifecycle of a query with arguments? Ex: session?.chat({gid: props.gid})

Will it fetch when the react component state changes? Or only when props.gid gets a new value?

Currently, if it's just property access like session?.use?. email it works as expected but when there's an argument, it seems to create a network request every time the react component renders

[vicary]

You may take a look at the useQuery API, especially the options starts with refetch*

1. refetchInterval
2. refetchOnReconnect
3. refetchOnRender
4. refetchOnWindowVisible
5. retryPolicy

These are soft refetches, which ultimately checks your cache validity (maxAge and staleWhileRevalidate), and only fetches when it encounters a stale, expired or missing cache value.

1. maxAge determines cache expiry
2. staleWhileRevalidate determines staleness

[hyusetiawan]

I saw them but it's still unclear to me when it actually triggers an actual request, because it triggers a request repeatedly for me. What's considered to be stale?

[hyusetiawan]

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

[vicary]

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.

[hyusetiawan]

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

[hyusetiawan]

@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.

gqt-infinite-refetch.mp4

[vicary]

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