SebasPtsch Posts

SebasPtsch

•Created by SebasPtsch on 11/25/2024 in #❓-help

tRPC Client Bundling `node_modules`

Hey team, I've been having an issue recently where tRPC seems to be bundling a .pnpm and node_modules in @trpc/client. This is causing a lot of errors as I'm not using pnpm: <project>/node_modules/@trpc/client/dist/TRPCClientError.mjs

import { _ as _define_property } from './node_modules/.pnpm/@swc_helpers@0.5.13/node_modules/@swc/helpers/esm/_define_property.mjs';

import { _ as _define_property } from './node_modules/.pnpm/@swc_helpers@0.5.13/node_modules/@swc/helpers/esm/_define_property.mjs';

This issue seems to first appear in rc 630.

4 replies

TtRPC

•Created by SebasPtsch on 12/23/2023 in #❓-help

Get Query Key on Server

I'm following some recommended practices from one of the react query maintainers @tkdodo and want to invalidate queries from the server in a type-safe way. As a result of this I want to be able to get the query keys for queries on the server to properly invalidate them using a trpc subscription. Is there a clean way to feed the router definition into getQueryKey? At the moment what I'm doing is:

/**
 * The main router for the backend, contains all other routers
 */
const appRouter = t.router({
  invalidator: publicProcedure.subscription(() => {
    return observable<TRPCQueryKey>((emit) => {
      ee.on("invalidate", (key) => {
        emit.next(key);
      });

      return () => {
        ee.off("invalidate");
      };
    });
  }),
});

export type AppRouter = typeof appRouter;

const rtrpc = createTRPCReact<AppRouter>();

const qk = getQueryKey(rtrpc.thing.getThing, "1"); // use this along with an eventemitter to invalidate queries on the client

/**
 * The main router for the backend, contains all other routers
 */
const appRouter = t.router({
  invalidator: publicProcedure.subscription(() => {
    return observable<TRPCQueryKey>((emit) => {
      ee.on("invalidate", (key) => {
        emit.next(key);
      });

      return () => {
        ee.off("invalidate");
      };
    });
  }),
});

export type AppRouter = typeof appRouter;

const rtrpc = createTRPCReact<AppRouter>();

const qk = getQueryKey(rtrpc.thing.getThing, "1"); // use this along with an eventemitter to invalidate queries on the client

This is not in the react context and I don't really want to import react in order to get the query key

13 replies

TtRPC

•Created by SebasPtsch on 12/22/2023 in #❓-help

Canary useUtils and createTRPCQueryUtils type not callable

Trying to access utils object in my application after using useUtils or createTRPCQueryUtils and getting the following type error:

This expression is not callable.
  Not all constituents of type '(DecorateRouter & { [x: string]: (DecorateRouter & ...) | DecorateProcedure<_trpc_server_dist_core_procedure.QueryProcedure<{ input: void; output: { isAuthenticated: boolean; isAdmin: boolean; }; }>, _trpc_server_dist_core_procedure.QueryProcedure<{ input: void; output: { ...; }; }>>; }) | DecorateProcedure<...> | (...' are callable.
    Type 'DecorateRouter & { [x: string]: (DecorateRouter & ...) | DecorateProcedure<_trpc_server_dist_core_procedure.QueryProcedure<{ input: void; output: { isAuthenticated: boolean; isAdmin: boolean; }; }>, _trpc_server_dist_core_procedure.QueryProcedure<{ input: void; output: { ...; }; }>>; }' has no call signatures.

This expression is not callable.
  Not all constituents of type '(DecorateRouter & { [x: string]: (DecorateRouter & ...) | DecorateProcedure<_trpc_server_dist_core_procedure.QueryProcedure<{ input: void; output: { isAuthenticated: boolean; isAdmin: boolean; }; }>, _trpc_server_dist_core_procedure.QueryProcedure<{ input: void; output: { ...; }; }>>; }) | DecorateProcedure<...> | (...' are callable.
    Type 'DecorateRouter & { [x: string]: (DecorateRouter & ...) | DecorateProcedure<_trpc_server_dist_core_procedure.QueryProcedure<{ input: void; output: { isAuthenticated: boolean; isAdmin: boolean; }; }>, _trpc_server_dist_core_procedure.QueryProcedure<{ input: void; output: { ...; }; }>>; }' has no call signatures.

11 replies