DevThoughts
Delete item {0: {json:{id: 12324}}}
It look like this:
iimport { httpBatchLink, loggerLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";
import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
import superjson from "superjson";
import { type AppRouter } from "~/server/api/root";
const getBaseUrl = () => {
if (typeof window !== "undefined") return ""; // browser should use relative url
if (process.env.VERCEL_URL) return https://${process.env.VERCEL_URL}`; // SSR should use vercel url
return http://localhost:${process.env.PORT ?? 3000}; // dev SSR should use localhost
};
export const api = createTRPCNext<AppRouter>({
config() {
return {
transformer: superjson,
links: [
loggerLink({
enabled: (opts) =>
process.env.NODE_ENV === "development" ||
(opts.direction === "down" && opts.result instanceof Error),
}),
httpBatchLink({
url: ${getBaseUrl()}/api/trpc,
}),
],
};
},
ssr: false,
});
export type RouterInputs = inferRouterInputs<AppRouter>;
export type RouterOutputs = inferRouterOutputs<AppRouter>;
`17 replies
Delete item {0: {json:{id: 12324}}}
pages/api/[trpc].ts
import { createNextApiHandler } from "@trpc/server/adapters/next";
import { env } from "~/env.mjs";
import { createTRPCContext } from "~/server/api/trpc";
import { appRouter } from "~/server/api/root";
// export API handler
export default createNextApiHandler({
router: appRouter,
createContext: createTRPCContext,
onError:
env.NODE_ENV === "development"
? ({ path, error }) => {
console.error(
❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}
);
}
: undefined,
});
17 replies
Nextjs http endpoint (no prisma)
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;
}),9 replies
Nextjs http endpoint (no prisma)
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[];
}),
});9 replies