tRPC Client Devtools Link

A neat link to use the tRPC Client Devtools extension with your tRPC app

This link lets your app communicate with the tRPC Client Devtools extension. You can download it for Chrome or Firefox.

Installation

npm install trpc-client-devtools-link

Example

1import { devtoolsLink } from "trpc-client-devtools-link"
2...
3links: [
4  devtoolsLink({
5    // `enabled` is true by default
6    // If you want to use the devtools extension just for development, do the following
7    enabled: process.env.NODE_ENV === 'development'
8  }),
9  httpLink({
10    url,
11  })
12],
13...

Requirements

Peer dependencies:

• tRPC Client v10+ (@trpc/client@>=10.0.0) must be installed.
• tRPC Server v10+ (@trpc/server@>=10.0.0) must be installed.

Compatibility

• ✅ tRPC v11.x
• ✅ tRPC v10.x
• ❌ tRPC v9.x (use version 0.1.0 for v9 support)

Credits

• This link is a modified version of the original loggerLink implemented in tRPC. You can check it out here.
• This library took heavily from the concepts to communicate between a library and a Chrome extension found in this article from Patrick Desjardins.