feat: Add splitLink to tRPC config to enable opting-out of batching

[dir]

Is your feature request related to a problem? Please describe.

I've been using create-t3-app in various production projects for the past year or so. There has been one issue that I was wrestling with for awhile in regards to tRPC batching. The documentation around batching on tRPC batching is a bit confusing, and for the longest time I was wondering my applications were hanging on certain requests. This was caused by tRPC automatically batching more demanding, slower requests with faster ones, even when they were on completely separate components.

For awhile I thought this was related to the way I was handling my components and states, but as I began to investigate further I realized this wasn't the case at all. After doing further research, I realized that the httpBatchLink method in the tRPC config was the culprit. In most cases, it is absolutely wonderful and should be the default route, but on certain queries, the option to opt-out of batching is vital.

Describe the solution you'd like to see

My feature request is adding the option to opt-out of httpBatchLink on specific tRPC queries using splitLink following the tRPC documentation surrounding this.

The implementation would be replacing the httpBatchLink logic starting at line 35 in src/utils/api.ts

From:

httpBatchLink({
  /**
   * Transformer used for data de-serialization from the server.
   *
   * @see https://trpc.io/docs/data-transformers
   */
  transformer: superjson,
  url: `${getBaseUrl()}/api/trpc`,
}),

To (with new imports of splitLink and httpLink of course):

splitLink({
  condition(op) {
    // check for context property `skipBatch`
    return op.context.skipBatch === true;
  },
  // when condition is true, use normal request
  true: httpLink({
    url: `${getBaseUrl()}/api/trpc`,
  }),
  // when condition is false, use batching
  false: httpBatchLink({
    /**
     * Transformer used for data de-serialization from the server.
     *
     * @see https://trpc.io/docs/data-transformers
     */
    transformer: superjson,
    url: `${getBaseUrl()}/api/trpc`,
  }),
}),

This would allow users to simply add the following to a tRPC query to exclude it from being batched with other queries:

trpc: {
  context: {
    skipBatch: true,
  },
},

Describe alternate solutions

The biggest alternate solution would be keeping simplicity and letting the users add this manually, which I would totally understand. I think the biggest "selling point" for this is that it doesn't effect any current applications and is completely unnoticed unless you do actually opt out.

Additional information

I think t3 stack is a lot of people's first introduction to tRPC. Regardless of if this gets added or not, I think it'd be wonderful to add something about this to the documentation of t3.

[juliusmarminge]

Have you tried the streaming link from trpc? It allows you to batch requests together to reduce the amount of http calls, but the requests are still allowed to be streamed in as each individual proceedure resolves.

📚 Docs: https://trpc.io/docs/client/links/httpBatchStreamLink