Fetch with timeout not returning cache items on timeout

[bigescalade]

Hello. I am trying to configure the urql client to use a fetch with timeout function. The timeout function works fine however if there is already items in the cache and the request times out no items in the cache are being returned either. The cacheExchange sits on top of the fetchExchange in the client config so the cache items should at least be returned in the response right? The request policy we use is cache-and-network for all our queries

async function fetchWithTimeout(
  url: RequestInfo,
  opts: RequestInit | undefined,
) {
  const controller = new AbortController()
  const timeout = setTimeout(() => controller.abort(), 30000)

  const response = await fetch(url, {
    ...opts,
    signal: controller.signal,
  })

  clearInterval(timeout)
  return response
}

here is the urql client setup

    return createClient({
      exchanges: [
        devtoolsExchange,
        dedupExchange,
        debugExchange,
        cacheExchange,
        fetchExchange,
      fetch: async (url: RequestInfo, opts: RequestInit | undefined) => {
        try {
          const response = await fetchWithTimeout(url, opts)
          const data = await response
          console.log({ data })
          return data
        } catch (error) {
          return error
        }
      },
      url: '',
    })