Include tRPC client 'loggerLink' for dev debugging

[t3dotgg]

tRPC has an awesome logger client built in for React Query that is a lifesaver

Adding the following to the _app.tsx trpc config will add them in dev

{
...
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
      ],
 }

[t3dotgg]

Wait this appears to be broken now rip :(

[nexxeln]

lol, do we still want this then?

[c-ehrlich]

if its possible to get it working in both tRPC v9 and v10 (or only v10 i guess), i think it would be a good thing to add. those console outputs are nice to have by default.

[t3dotgg]

If we can get it working I definitely want it in dev mode

[henriqgoncalvs]

Well, it worked here. But I had to use the httpBatchLink as well. With only the loggerLink I was getting a TypeError: link is not a function. Tested in other projects with trpc in version 9.26.2 and got the same error.

That log really helps in development, and I also find the httpBatchLink a good thing to add to trpc config. What do you think @theobr , do you still think it's useful to add the loggerLink and the httpBatchLink?

const links = [
      loggerLink({
        enabled: (opts) =>
          process.env.NODE_ENV === 'development' ||
          (opts.direction === 'down' && opts.result instanceof Error),
      }),
      httpBatchLink({
        maxBatchSize: 10,
        url,
      }),
    ];

return {
      url,
      transformer: superjson,
      links,
      /**
       * @link https://react-query.tanstack.com/reference/QueryClient
       */
      // queryClientConfig: { defaultOptions: { queries: { staleTime: 60 } } },
    };

[t3dotgg]

@hnqg sorry just saw this now - yeah would be nice to add this I think

[juliusmarminge]

tRPC already batches requests by default so adding an explicit httpBatchLink seems scary (in the way we prescribe a default for how big your batches should be) unless it's really needed?

EDIT: Turns out it is needed, but we don't need to pass an explicit maxBatchSize

[kaminskypavel]

TIL that links order matters. here's the correct order

        links: [
            loggerLink({
                enabled: (opts) =>
                    isDevelopment() ||
                    (opts.direction === "down" && opts.result instanceof Error),
            }),

            httpBatchLink({
                url,
                headers: {
                    Authorization: `Bearer ${token}`
                }
            }),
        ],