❓-help

Hello, is there any way to create a base router with common procedures? like an interface

IAAI am a Dev

10/14/2023

I want all routers that use it have the state procedure (subscriptions), so I can create a common hook later Although the implementation of the methods is completely different on each router, I just want to guarantee that they have those procedures, like an interface The hook basically will subscribe to the state on mount, and unsubscribe on unmount Thanks

IAAI am a Dev

10/14/2023

I have something like this:

import { useEffect, useState } from 'react';
import type { Unsubscribable } from '@trpc/server/observable';
import type {} from '@trpc/client/src/';

interface UseRouterStateOptions<TState> {
  stateSubscribe: (
    input: undefined,
    opts: { onData: (state: TState) => void },
  ) => Unsubscribable;
}

export function useRouterState<TState>(
  opts: UseRouterStateOptions<TState>,
): TState | null {
  const [state, setState] = useState<TState | null>(null);

  useEffect(() => {
    const stateSubscription = opts.stateSubscribe(undefined, {
      onData: (data) => {
        setState(data);
      },
    });

    return () => {
      stateSubscription.unsubscribe();
    };
  }, []);

  return state;
}

import { useEffect, useState } from 'react';
import type { Unsubscribable } from '@trpc/server/observable';
import type {} from '@trpc/client/src/';

interface UseRouterStateOptions<TState> {
  stateSubscribe: (
    input: undefined,
    opts: { onData: (state: TState) => void },
  ) => Unsubscribable;
}

export function useRouterState<TState>(
  opts: UseRouterStateOptions<TState>,
): TState | null {
  const [state, setState] = useState<TState | null>(null);

  useEffect(() => {
    const stateSubscription = opts.stateSubscribe(undefined, {
      onData: (data) => {
        setState(data);
      },
    });

    return () => {
      stateSubscription.unsubscribe();
    };
  }, []);

  return state;
}

And in the widget I should use this:

  const state = useRouterState({
    stateSubscribe:
      tRPCClient.router1.router2.state.subscribe,
  });

  const state = useRouterState({
    stateSubscribe:
      tRPCClient.router1.router2.state.subscribe,
  });

But i want to only pass the router as a argument, because i want to return more properties that only the state I'm using electron-trpc, so basically the router is like a store, so I can use all the node logic in the main process, but subscribe to the state in the renderer. And because I have more than 30 store like this, want to create common hooks and interfaces

Nnlucas

10/14/2023

You probably want a Router Factory, and may want to use our Polymorphism types on the frontend too: https://dev.to/nicklucas/trpc-patterns-router-factories-and-polymorphism-30b0 It does take a certain amount of confidence with Typescript to use this pattern, but sounds like it's exactly your use case This said, subscriptions aren't currently in the polymorphism types simply because we haven't added them, so YMMV

Looking for more? Join the community!

❓-help

❓-help

Recommended Posts

Help Retrieving req.url from opts in useMutation from tRPCHello, i'm trying to essentially send a magiclink email using supabase client libraries, however, i'Express tRPC NextJSI've custom expressjs server with Nextjs + im using internal package for handling OneLogin (OIDC) ho Dynamic links url dependent on next headers?Hi, We're currently explore if we can use trpc on a multi tenant next.js 13 application. But we can calling TRPCProxyClient from inside trpc procedure fails on vercel route handlers edge runtimei setup my client as following: ``` export const serverToServerApi = createTRPCProxyClient<AppRouter Private procedures and serverside callsHello, I am just diving into trpc in my Next.js (app router) application and I am wondering if is th inferRouterOutputs ignore "complex data type" fields and only have primitive fields. Bug?Is this a bug ? I have done npx prisma db push, I have restarted VSCode and Typescript. Any comments How can i modify my URL using TRPCI did a simple pagination in react and trpc(a simple table), only problem is that: i want in my url TRPC EXPORT API TYPES BE to FEIs there a way I can automatically export my API types from the backend to the frontend? For example how to access body in middlewareHi, I’m using trpc with nextjs. Does anyone know how to access the request’s body in middleware? As Decreasing autocomplete performanceAnyone else suffering from increased latency (mostly on the front-end) when doing autocomplete with Error while creating a mutation in NextJSI am having the following error: ```"message": "No \"query\"-procedure on path \"checkout.stripe\"",trpc PaginationDoes somebody have any example how can i do pagination in trpc and react query?Auth through trpc proceduresHas Anyone Successfully Implemented Supabase Auth through tRPC Procedures in a Next.js App? Hello e supabase + trpcdid anyone handle to make it work -> context and all signup signin etc methods?How to update query data after mutationAny idea?standaloneMiddleware: Merge ctx/meta/input typesUsing standaloneMiddleware, it would be great to merge the types (ctx, input, meta) with what is alr