tRPC Client Mutation Fails with "createUnhandledError" in Next.js

Question

Problem Description I'm working on a Next.js project where I'm using tRPC to manage API requests. While implementing a mutation to create a project, I encountered the following error in the browser console:

Error Stack Tracetypescript[[ << mutation #1 ]project.createProject {}Call StackcreateUnhandledErrorfile:/D:/PROJECTS/lunaris/.next/static/chunks/node_modules_next_dist_client_9bb038..js (744:19)handleClientErrorfile:/D:/PROJECTS/lunaris/.next/static/chunks/node_modules_next_dist_client_9bb038..js (905:98)errorfile:/D:/PROJECTS/lunaris/.next/static/chunks/node_modules_next_dist_client_9bb038..js (1036:56)[project]/node_modules/@trpc/client/dist/links/loggerLink.mjs [app-client] (ecmascript)/defaultLogger/


**What I’m Trying to Achieve
**I'm building a simple form to create a new project by sending data to the server using a tRPC mutation. Here's the client-side code for the form:
"use client";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { api } from "@/trpc/react";
import React from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";

type FormInput = {
  repoUrl: string;
  projectName: string;
  githubToken?: string;
};

const CreatePage = () => {
  const { register, handleSubmit, reset } = useForm();
  const createProject = api.project.createProject.useMutation();

  function onSubmit(data: FormInput) {
    createProject.mutate(
      {
        githubUrl: data.repoUrl,
        name: data.projectName,
        githubToken: data.githubToken,
      },
      {
        onSuccess: () => {
          toast.success("Project Created Successfully");
          reset();
        },
        onError: (error) => {
          toast.error("Failed to create project");
          console.error("Mutation Error:", error);
        },
      }
    );
    return true;
  }

  return (
    
      
      
        
          Link your Github Repository
          
            Enter the URL of your repository to link it to Lunaris!
          
        
        
        
          
            
            
            
            
            
            
            
          
        
      
    
  );
};

export default CreatePage;

Server-Side Setup
On the server side, I have defined a Prisma model and a tRPC mutation.
Prisma Schema
generator client {
    provider = "prisma-client-js"
}

datasource db {
    provider = "postgresql"
    url      = env("DATABASE_URL")
}

model User {
    id        String   @id @default(cuid())

    createdAt DateTime @default(now())
    updatedAt DateTime @updatedAt

    imageURL  String?

    firstName      String?
    lastName       String?
    emailAddress     String   @unique

    credits    Int      @default(150)


    userToProjects UserToProject[]
}

model Project{
    id        String   @id @default(cuid())
    createdAt DateTime @default(now())      
    updatedAt DateTime @updatedAt

    name        String
    githubUrl   String

    deletedAt DateTime?

    userToProjects UserToProject[]
}

model UserToProject{
    id        String   @id @default(cuid())
    createdAt DateTime @default(now())      
    updatedAt DateTime @updatedAt

    userId    String
    projectId String

    user     User     @relation(fields: [userId], references: [id])
    project Project @relation(fields: [projectId], references: [id])

    @@unique([userId, projectId])
}

tRPC Router
import { z } from "zod";
import { createTRPCRouter, publicProcedure, protectedProcedure } from "../trpc";

export const projectRouter = createTRPCRouter({
    createProject: protectedProcedure.input(
        z.object({
            name: z.string(),
            githubUrl: z.string(),
            githubToken: z.string().optional()
        })
    ).mutation(async({ctx, input})=>{
        // const project =await ctx.db.project.create({
        //     data:{
        //         githubUrl: input.githubUrl,
        //         name: input.name,
        //         userToProjects:{
        //             create:{
        //                 userId: ctx.user.userId!,
        //             }
        //         }
        //     }
        // })
        console.log("input",input)
        return true
    })
})

Github repo for referance - link
Youtube video referance - link
Steps to Reproduce
Clone the repository:
bash
git clone https://github.com/arghyabag/lunaris.git

cd lunaris

Install dependencies with Bun:
bash
bun install

Setup your environment variables:
Add a .env file in the root directory.
Include the following variables:
**env
**
DATABASE_URL=your_postgres_connection_string
NEXTAUTH_SECRET=your_secret_key

Apply Prisma migrations:
bash
npx prisma migrate dev

Start the development server:
bash
bun dev

Access the application at http://localhost:3000.
Deployment with Bun
Install Bun globally (if not already):
bash
curl -fsSL https://bun.sh/install | bash

Build the application for production:
bash
bun build

Run the production build:
bash
bun start

Ensure your environment variables are configured properly in your deployment setup.
I'm building a form to create a new project by sending data to the server via a tRPC mutation.

tRPC Client Mutation Fails with "createUnhandledError" in Next.js

Answers (1)

Related Questions

tRPC Client Mutation Fails with &quot;createUnhandledError&quot; in Next.js

Answers (1)

Related Questions

tRPC Client Mutation Fails with "createUnhandledError" in Next.js