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

2 Replies

cje•2y 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.

HampterultimateOP•2y ago

Thank you very much for replying cje, I will try it and let you know

Gaming

Programming

How do I use a tRPC procedure outside a react component