Get time that last fetch occurred for query

[shekharsaxena]

Hello, In my current project I need to show the time that the last fetch occurred (either initial fetch to server, or fetch to cache).

I was wondering if I could somehow trigger this off of isFetching, or isLoading, but can't really update a local state variable with the date since the component will re-render.

Is there an easy way to get a timestamp for when the last fetch occurred, or a recommended solution for this.

Thanks!

[TkDodo]

It seems to be not very well documented, but useQuery also returns an updatedAt: number field that holds exactly what you want I believe: https://github.com/tannerlinsley/react-query/blob/69236d3e0bce712376767a86eac9246b304f6be6/src/core/types.ts#L215

[shekharsaxena]

Amazing, this is exactly what I needed! thank you

[bennettdams]

I think updatedAt was removed meanwhile and replaced by two attributes: dataUpdatedAt & errorUpdatedAt.
So what I'm doing now is to combine these two to a single updatedAt:

export function useMyData(...) {
  const { isLoading, data, dataUpdatedAt, errorUpdatedAt } = useQuery(...)
  ...
  return {
    isLoading,
    myData: data?.result || null,
    updatedAt: errorUpdatedAt 
      ? new Date(errorUpdatedAt)
      : dataUpdatedAt
      ? new Date(dataUpdatedAt)
      : null,
  };
}

@TkDodo Will the error fetch return null when a new request does not result in an error? Otherwise dataUpdatedAt will never return its date when there was an error once.

I think the native updatedAt is a better solution for the user (of React Query).

[TkDodo]

@TkDodo Will the error fetch return null when a new request does not result in an error? Otherwise dataUpdatedAt will never return its date when there was an error once.

I just looked at the code, you have to try it out but I don't think it resets. It gives you the time when a the last error and/or the last update has occurred. You'd have to check the status field for your use-case, so use errorUpdatedAt only when status is error

[bennettdams]

You'd have to check the status field for your use-case, so use errorUpdatedAt only when status is error

Thanks! New solution looks like this, which works like a charm:

  const { isLoading, data, dataUpdatedAt, errorUpdatedAt, isError, isSuccess } = useQuery(...)

  return {
    isLoading,
    myData: data?.result || null,
    updatedAt: isError
      ? new Date(errorUpdatedAt)
      : isSuccess
      ? new Date(dataUpdatedAt)
      : null,
  };

[mkusold]

I noticed that the errorUpdatedAt and dataUpdatedAt are no longer available. I observed that fulfilledTimeStamp and startedTimeStamp seem to have taken their place