Disable batching multiple useQuery

I'm using useQuery as below:

const CompanyPage: NextPage<{ asxCode: string }> = ({ asxCode }) => {
  const { data } = api.company.getByCode.useQuery( ... ); // Quick query
  const { data: historicalData } = api.company.getHistorical.useQuery( ... ); // Long query

  ...
}

const CompanyPage: NextPage<{ asxCode: string }> = ({ asxCode }) => {
  const { data } = api.company.getByCode.useQuery( ... ); // Quick query
  const { data: historicalData } = api.company.getHistorical.useQuery( ... ); // Long query

  ...
}

I've noticed that upon loading the component the above produces one network request with both the queries in one, i.e:

http://localhost:3000/api/trpc/company.getByCode,company.getHistorical?batch=1&input=...

http://localhost:3000/api/trpc/company.getByCode,company.getHistorical?batch=1&input=...

In my case the getHistorical query makes an external API call which sometimes takes quite long to complete and as a result data from getByCode will be delayed because getHistorical is taking so long. I came across this tRPC documentation: https://trpc.io/docs/v9/links#using-a-splitlink-to-control-request-flow And tried following along by amending my src/utils/api.ts file:

      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        // httpBatchLink({
        //   url: `${getBaseUrl()}/api/trpc`,
        // }),
        splitLink({
          condition(op) {
            // check for context property `skipBatch`
            return op.context.skipBatch === true;
          },
          // when condition is true, use normal request
          true: httpLink({
            url,
          }),
          // when condition is false, use batching
          false: httpBatchLink({
            url,
          }),
        }),
      ],

      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        // httpBatchLink({
        //   url: `${getBaseUrl()}/api/trpc`,
        // }),
        splitLink({
          condition(op) {
            // check for context property `skipBatch`
            return op.context.skipBatch === true;
          },
          // when condition is true, use normal request
          true: httpLink({
            url,
          }),
          // when condition is false, use batching
          false: httpBatchLink({
            url,
          }),
        }),
      ],

And tried using it in my component query like so:

    api.company.getHistorical.useQuery(
      {
        asxCode: asxCode.toUpperCase(),
      },
      {
        context: {
          skipBatch: true
        }
      }
    );

    api.company.getHistorical.useQuery(
      {
        asxCode: asxCode.toUpperCase(),
      },
      {
        context: {
          skipBatch: true
        }
      }
    );

But I'm currently getting an error in VSCode (see attached image). Or am I completely on the wrong path and there is a simpler way of not batching queries?

Links & Request Batching | tRPC

Similar to urql's exchanges or Apollo's links. Links enables you to customize the flow of data between tRPC Client and the tRPC-server.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Disable batching multiple useQuery