TTC
Theo's Typesafe CultHampterultimate

How do I use a tRPC procedure outside a react component

Hello guys, I made a simple router which will give me similar tags from my tags model from prisma 
import { z } from "zod";

import {
  createTRPCRouter,
  publicProcedure,
  protectedProcedure,
} from "~/server/api/trpc";

export const tags = createTRPCRouter({
  relatedTags: publicProcedure.input(z.string()).query(({ ctx, input }) => {
    const searchString = input.toLowerCase().replace(/ /g, "");
    return ctx.prisma.tag.findMany({
      where: { name: { contains: searchString } },
      take: 5,
    });
  }),

  getAll: publicProcedure.query(({ ctx }) => {
    return ctx.prisma.tag.findMany();
  }),
});
import { z } from "zod";

import {
  createTRPCRouter,
  publicProcedure,
  protectedProcedure,
} from "~/server/api/trpc";

export const tags = createTRPCRouter({
  relatedTags: publicProcedure.input(z.string()).query(({ ctx, input }) => {
    const searchString = input.toLowerCase().replace(/ /g, "");
    return ctx.prisma.tag.findMany({
      where: { name: { contains: searchString } },
      take: 5,
    });
  }),

  getAll: publicProcedure.query(({ ctx }) => {
    return ctx.prisma.tag.findMany();
  }),
});
However the part where I want to call this code is outside of a react component and as its a hook I cannot call it outside a react component. I tried searching the web and I found out that to do that I will need to expose it using next API endpoint. There must be a better way to do this please let me know if you know any. Here is the image where I want to call it, in case you want the extra info
C
cje•368d ago
if this code is running client side, your best bet is using the vanilla client https://trpc.io/docs/client/introduction
tRPC Client | tRPC
The "vanilla" tRPC client can be used to call your API procedures as if they are local functions, enabling a seamless development experience.
H
Hampterultimate•367d ago
Thank you very much for replying cje, I will try it and let you know
Want results from more Discord servers?
Add your server
More Posts
Syntax help for useQuery with no inputshi, i have two queries in my component, however on my first query I can't pass in refetchOnMount? anAlternative to Planetscale for multiple smaller appsHi While creating our latest tool, I used the tRPC + Planetscale + Clerk stack and fell in love witRemoving unused importsA rather annoying and controversial thing that was built into version 7.3.2. As far as I can see, tvariable initialized useState as true but the state is falsehasReaction is true, but liked is false error gets printed multiple times const hasReaction = poscreate-t3-turbo monorepo: How to access user session to packages/db?I would like to access some props from user's session to **prisma middleware** i.e. in below exampleCreating an update mutation with tRPCHi everyone, I'm trying to use an update mutation in this way: ```ts export const beerRouter = creatCreate and Download PDFI have a web app that allows users to edit a table including drag/dropping rows, change row colors, Is it possible to pass a zod schema as a prop?I have this ```ts interface Props { schema: ZodSchema; children: React.ReactNode; defaul