Theo's Typesafe Cult•3y ago

trpc response time

I have a situation where I need to record the response time of a request. If I wasn't using trpc, I would just record the start time, await the response and record the end time. Is there a way to do this, while using trpc?

2 Replies

Matvey•3y ago

Maybe there is a better solution, but you can watch .isLoading and record time when in changes

import_antigravityOP•3y ago

I think that makes sense

import { useEffect, useState } from "react";
import { trpc } from "./trpc";

export function useServerTimeDelta() {
  const [start, setStart] = useState(Date.now())
  const [end, setEnd] = useState(Date.now())
  const [delta, setDelta] = useState(0)
  const query = trpc.server.getServerTime.useQuery(undefined, {
    onSuccess: (x) => setDelta(x - Date.now()),
    staleTime: 1000 * 60 * 5,
  });
  useEffect(() => {
    if (query.isLoading) {
      setStart(Date.now())
    } else {
      setEnd(Date.now())
    }
  }, [query.isLoading])
  const halfTime = (end - start) / 2
  return delta + halfTime
}

import { useEffect, useState } from "react";
import { trpc } from "./trpc";

export function useServerTimeDelta() {
  const [start, setStart] = useState(Date.now())
  const [end, setEnd] = useState(Date.now())
  const [delta, setDelta] = useState(0)
  const query = trpc.server.getServerTime.useQuery(undefined, {
    onSuccess: (x) => setDelta(x - Date.now()),
    staleTime: 1000 * 60 * 5,
  });
  useEffect(() => {
    if (query.isLoading) {
      setStart(Date.now())
    } else {
      setEnd(Date.now())
    }
  }, [query.isLoading])
  const halfTime = (end - start) / 2
  return delta + halfTime
}

Seems accurate, thanks for the suggestion I think it may need to watch isFetching rather than isLoading but I need to look into it more

Gaming

Programming

trpc response time