Roundtrip time?

[mikecann]

Is there a way to get the roundtrip time (ms) for the last successful query?

[TkDodo]

I don't think so. What's your use-case?

[mikecann]

We have a web game project where we need to track "server time" vs "user time".

The user time can be different from the server time because the user's system clock is out.

To compensate for this, we need to work out the difference between the server time now vs what the user thinks the time is now. To do that accurately we need to take into account the roundtrip time from the client to the server then divide by 2 to get the time offset from the query to "getTimeNow" on the server.

It would be nice if react-query also recorded the roundtrip time in ms for the last successful query and exposed it in the object returned by useQuery.

Roundtrip time could also be useful for logging purposes.

[TkDodo]

const diff = useRef(0)
useQuery(key, () => {
  const before = Date.now()
  const result = await fetchItems()
  diff.current = Date.now() - before
  return result
})

[mikecann]

ah nice! thhanks :)

[marvelsrp]

How can this duration be stored in the cache state?

[TkDodo]

like so? (depends on what result is though (has to be an object for this to work)

useQuery(key, () => {
  const before = Date.now()
  const result = await fetchItems()
  return {
    ...result,
    roundtripTime: Date.now() - before
  }
})

[marvelsrp]

like so? (depends on what result is though (has to be an object for this to work)

useQuery(key, () => {
  const before = Date.now()
  const result = await fetchItems()
  return {
    ...result,
    roundtripTime: Date.now() - before
  }
})

This only works with objects, and saves in response. I want to receive this data in the future from metadata, for example as isLoading or dateUpdatedAt.

  const queryClient = useQueryClient();
  const queryCache = queryClient.getQueryCache();
  const cachedQuery = queryCache.find(queryKey);

cachedQuery.state.roundtripTime ?

[TkDodo]

you asked how to save it in the cache state, and since the return value of the queryFn is put into the cache, that is the way to do it. If your api doesn't return an object, you can always nest it:

const result = await fetchItems()
return {
  roundtripTime: Date.now() - before,
  result
}

I want to receive this data in the future from metadata, for example as isLoading or dateUpdatedAt.

This is not possible, simply because these values come from react-query, and the only thing you have influence over is the cache value.