Get queries execution time

[Alarid]

I am in the process of replacing Apollo Client with react-query and graphql-request in my project because I prefer react-query and I am already using it for non-graphql requests.

Previously, with Apollo, I was able to set up Links and Contexts that acted like middlewares. This allowed me to start a timer on outgoing requests by storing the value of performance.now() in the request's context. When the response came back, I was able to compute the query execution time and log it in Elastic Search along with other useful information about the query.

I am trying to do the same with react-query and graphql-request, but I am struggling to find the right approach. I tried storing the start timestamp in the query's context (using meta) within the query function, but then I was unable to find meta in the return value of the hook. My plan was to use this along with dataUpdatedAt to compute the request duration.

Do you have any ideas on how I could achieve this?

[TkDodo]

you can measure time right in the queryFn - before and after you fire the request, or directly on your "api layer".

[Alarid]

I don't have any "api layer" here cause I'm requesting my GraphqlQL endpoint directly. Just to clarify, your other option would be to do something like this ?

useQuery({
  queryKey: ['myQueryKey'],
  queryFn: () => {
    const start = performance.now()
    const res = await graphQLClient.request(MyGraphQLQuery)
    const time = performance.now() - start
    // do something with "time"
    return res
  }
})

I guess it could work, but doesn't it mean I'd have to handle error cases myself with try / catch ?

[TkDodo]

yeah this is what I meant. Errors will still be thrown to react-query, but the time measurement will only work if the query succeeds.

[Alarid]

Ok great then, thanks for your help

[areindl]

Hey @Alarid? did you make it work ultimately?

[Alarid]

Hey @Alarid? did you make it work ultimately?

Hey @areindl , sorry for the delay, yeah I did, using the method highlighted as answer.

Basically, I run every request through a util function I wrote called "timedPromise", inside the queryFn. This util function is responsible for timing the actual request, logging the time (and the error if any) to elastic search, and returning the result (or throwing the error).

If you're interested, here's what it looks like :

export async function timedPromise<T>(
  queryName: string,
  promise: Promise<T>,
  variables?: any,
) {
  const startDate = new Date().toISOString()
  const start = performance.now()
  let result: T
  let error = null
  try {
    result = await promise
  } catch (err) {
    error = err
  }
  if (
    process.env.NEXT_PHASE === PHASE_PRODUCTION_BUILD &&
    process.env.NEXT_PUBLIC_ENV === 'local'
  ) {
    // We don't log during static generation on localhost, because the API route isn't available
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    return result
  }
  const duration = performance.now() - start
  const env =
    process.env.NEXT_PHASE === PHASE_PRODUCTION_BUILD
      ? 'static generation'
      : typeof window === 'undefined'
        ? 'server'
        : 'client'
  const data: RequestLog = {
    queryName,
    params: variables,
    startDate: startDate,
    duration,
    context: env,
    hasErrored: !!error,
  }
  try {
    if (process.env.IS_BUILD_PHASE !== '1') {
      client('api/graphql/log', { data })
    }
  } catch (err) {
    Logger.error('Failed to log request', err)
  }

  if (!!error) {
    throw error
  }
  // TS thinks at this point result can be undefined, but we know it can't be
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  return result
}