next.js & TRPC
Unanswered
Avery posted this in #help-forum
AveryOP
Hello all! I'm working on an app that uses a tRPC mutation to make a request to an AI endpoint. I run the ai fetch request on my own, and it works but when I click my button and useMutation it just doesn't work and it says tRPC failed on ...: fetch failed
11 Replies
Pembroke Welsh Corgi
the info you shared is not enough to understand what is going on
can you share a snippet of the mutation function?
can you share a snippet of the mutation function?
also, do other mutations and queries work on the same router?
Masai Lion
could you share code snippet and clear what's issue
AveryOP
Router
When button pressed:
import { z } from "zod";
import { createTRPCRouter, protectedProcedure } from "../trpc";
import { ai } from "@/server/ai";
import { OpenAI } from "openai";
export const citationRouter = createTRPCRouter({
createCitationPromptThingy: protectedProcedure
.input(
z.object({
roblox: z.string(),
whattheydo: z.string(),
}),
)
.mutation(async ({ ctx, input }) => {
const client = new OpenAI({
apiKey: "",
baseURL: "http://localhost:1234/v1",
});
const { roblox, whattheydo } = input;
const req = await fetch("http://localhost:1234/v1/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
messages: [
{
role: "system",
content: `...`,
},
{
role: "user",
content: "Reckless Driving",
},
],
}),
});
const response = await req.json();
console.log(response);
return response;
}),
});When button pressed:
const mutate = api.citations.createCitationPromptThingy.useMutation();
const createCitation = async () => {
if (buttonLoading) return;
setButtonLoading(true);
if (!citation) {
setButtonLoading(false);
return;
}
console.log(citation);
const d = await mutate.mutateAsync({
roblox: "vapqrr",
whattheydo: citation,
});
console.log(d);
setButtonLoading(false);
};@Pembroke Welsh Corgi @Masai Lion
Pembroke Welsh Corgi
still not enough info, share the full error too, the error should hint at which line it fails
AveryOP
Pembroke Welsh Corgi
oh wow
how did you configure the trpc client in the trpc React context provider?
all*