Next.js Discord

Discord Forum

next.js & TRPC

Unanswered
Asari posted this in #help-forum
Open in Discord
AsariOP
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?
also, do other mutations and queries work on the same router?
Masai Lion
could you share code snippet and clear what's issue
AsariOP
Router
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
@Pembroke Welsh Corgi still not enough info, share the full error too, the error should hint at which line it fails
AsariOP
Pembroke Welsh Corgi
oh wow
how did you configure the trpc client in the trpc React context provider?
@Pembroke Welsh Corgi how did you configure the trpc client in the trpc React context provider?
AsariOP
It's from create t3 app, didn't change this at app.
all*