[Question] How to create the trpc for event subscribe and publish out of a react component ?

[liaodalin19903]

Hi,

In the react demo, we know how to use the trpcClient to subscribe and publish event.

but I think the creation step is tedious:

import React, { useState } from 'react';
import ReactDom from 'react-dom';
import { ipcLink } from 'electron-trpc/renderer';
import { createTRPCReact } from '@trpc/react-query';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import type { AppRouter } from '../electron/api';

const trpcReact = createTRPCReact<AppRouter>();

function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpcReact.createClient({
      links: [ipcLink()],
    })
  );

So, is there any method to encapsulate the trpcClient creation in another file?

such as there has the createTRPCProxyClient way to create:

export const trpc = createTRPCProxyClient<AppRouter>({
  links: [
    loggerLink(),
    httpBatchLink({
      url: '/trpc',
      fetch: async (input, init) => {
        const req: IpcRequest = {
          url: input instanceof URL ? input.toString() : typeof input === 'string' ? input : input.url,
          method: input instanceof Request ? input.method : init?.method!,
          headers: input instanceof Request ? input.headers : init?.headers!,
          body: input instanceof Request ? input.body : init?.body!,
        };

        const resp = await window.api.trpc(req);
        return {
          json: () => Promise.resolve(resp.body),
        };
      },
    }),
  ],
  transformer: new superjson(),  
});

but this trpc creation instance cannot use event subscription.

TRPCClientError: Subscriptions should use wsLink at _TRPCClientError.from (http://localhost:5173/@fs...)

please tell me how to create the trpc for event subscribe and publish out of a react component .