Disabling batching

[HalfdanJ]

Is there a way to control the batch settings of trpc? I'm reading the trpc docs https://trpc.io/docs/links/splitLink#disable-batching-for-certain-requests, but unsure how to configure it inside trpc-sveltekit. I'm trying to disable batching since i'm having too big requests.

[codicocodes]

I have the same question. It would be interesting to do so on a query by query basis, and also on a global basis.

The reason I need the feature is to be able to more predictable cache some trpc queries on the CDN layer, with batching that becomes more configuration and sometimes impossible if batched together with a non cachable query.

I tried something like this, but it would still batch the query:

await trpc(event).someQuery.query(null, {
	context: {
		skipBatch: true
	}
})

@icflorescu curious if there are any plans to add this feature?

I'd be open to giving implementing it a try as well if you're open to the feature. I'm not familiar with the code base so any pointers on where would be relevant to check would be appreciated!

[icflorescu]

Unfortunately I don't have free time to spare at the moment, but I'm more that open to a PR.
So, @codicocodes, it would be fantastic if you could give this a try!

This should actually be quite straightforward to implement; the relevant code is here:

trpc-sveltekit/package/src/client.ts

Line 57 in f9aa410

export function createTRPCClient<Router extends AnyRouter>(

I guess you could extend the method parameters signature to accept an option called skipBatch or something like that, (and make sure to default to false) and refer to the aforementioned trpc docs to disable it on a query by query basis.

[codicocodes]

Great to hear, and thank you for sharing this.

By digging into the code and the details you provided here, it looks like this is already supported on a query by query basis by passing in your own links with a splitLink using the context of each request.

// trpc/client.ts
export function trpc(init: TRPCClientInit) {
  const isBrowser = typeof window !== 'undefined';
  if (isBrowser && browserClient) return browserClient;
  const url = "/trpc"
  const client = createTRPCClient<Router>({
    links: [
      splitLink({
        condition(op) {
          // check for context property `skipBatch`
          return op.context.skipBatch === true;
        },
        true: httpLink({
          url:
            typeof window === 'undefined' ? `${init.url.origin}${url}` : `${location.origin}${url}`,
          fetch: typeof window === 'undefined' && init ? init.fetch : init?.fetch ?? window.fetch,
        }),
        false: httpBatchLink({
          url:
            typeof window === 'undefined' ? `${init.url.origin}${url}` : `${location.origin}${url}`,
          fetch: typeof window === 'undefined' ? init.fetch : init?.fetch ?? window.fetch,
        })
      })
    ]
  });
  if (isBrowser) browserClient = client;
  return client;
}

I assume this might also work on a global level, by passing in a httpLink instead of using the default httpBatchLink

Perhaps a PR is not necessary, unless some global configuration would also be valuable.