tRPC Client Flipper devtools

A Flipper plugin to visualize tRPC procedure calls for a React Native app.

Devtools in action with the example client app

Setup devtools

1. Install dependencies:

yarn add -d react-native-apollo-devtools-client react-native-flipper

2. Initialize the plugin as a tRPC client middleware:

import { createTRPCReact } from "@trpc/react-query";
import { httpBatchLink } from "@trpc/client";
import { flipperDevToolsLink } from 'react-native-trpc-flipper-devtools';

export const trpc = createTRPCReact<AppRouter>();

export const trpcClient = trpc.createClient({
  links: [
    flipperDevToolsLink({
      enabled: __DEV__,
    }),
    httpBatchLink({
      url: "http://localhost:3000",
    }),
  ],
});

Setup Flipper

1. Open the Plugins Manager > Install Plugins tab, search for flipper-plugin-react-native-trpc and install the plugin.

2. Restart flipper.

3. You should now see tRPC DevTools on the sidebar.