Nextjs http endpoint (no prisma)

I have simple pages/api/todoEndpint how do i call this endpoint with trcp? I don't want to use prisma?

5 Replies

Fast•16mo ago

Trpc has nothing to do with Prisma i would recommend reading this https://trpc.io/docs And for the endpoint you would have to rewrite it to be defined in the trpc router as a procedure and not a regular nextjs endpoint

tRPC | tRPC

End-to-end typesafe APIs made easy

DevThoughts•16mo ago

Thank you! I started to understand:

import { z } from "zod";

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

const url = "https://jsonplaceholder.typicode.com/todos";

export const exampleRouter = createTRPCRouter({
  hello: publicProcedure
    .input(z.object({ text: z.string() }))
    .query(({ input }) => {
      return {
        greeting:

Hello ${input.text}

,
      };
    }),
  getAllTodos: publicProcedure.query(async () => {
    const res = await fetch(url);
    const data = await res.json();
    return data as Todo[];
  }),
});

Making a todos route but not getting type completion.

Fast•16mo ago

Does it just not show up on the client? and can you see the hello query?

DevThoughts•16mo ago

yes, it did show up 🙂 Now i am unsure if this is right way to add types

getAllTodos: publicProcedure.query(() => {
    const data = fetch(url).then(
      (res): Promise<{ id: number; title: string; completed: boolean }[]> =>
        res.json()
    );
    return data;
  }),

Fast•16mo ago

Personally I think creating an interface and just casting the json result to it would be the cleanest (Would still have to check if the result of the fetch is correct eg status = 200) almost like how you did it in the first snippet