URQL Request Fails to be saved in Next.js cache

Question

Using the App router in Next.js I have a server component that is making a request using an urql client. Everytime the request runs the following error gets printed into the console:

Failed to set fetch cache myapiUrl Error: fetch for over 2MB of data can not be cached

Following the urql documentation I'm using the @urql/next package to create my client for server components as follows:

import { cacheExchange, createClient, fetchExchange } from "@urql/core"
import { registerUrql } from "@urql/next/rsc"
import { getApiUrl } from "@utils/urls"

const makeClient = () => {
    return createClient({
        url: getApiUrl(),
        exchanges: [cacheExchange, fetchExchange],
    });
};

export const { getClient: getAppRouterClient } = registerUrql(makeClient);

And then this client is getting used in my server component:

const result = await getAppRouterClient().query( UrqlQueryName, {
        varKeys: "varValues"
    } )

The actual response size is no where near 2MB (~20kB) so my assumption is something is wrong with the cacheExchange.