Skip to content

Article

A interesting bug and learning while building form-builder

A interesting bug and learning while building form-builder

Debugging a delete form bug in my tRPC form-builder — foreign key constraints, cascade deletes, and what I learned.

This is the bug i faced while i building a feature of delete form in my form builder.

What's the bug?

I am building form-builder in the monorepo and trpc so the feature is when i want to delete the form its deleted from the db ,its easy crud operation nothing more complex thing to be done ,so I write the service procedure make the hook and call the hook on frontend i test its work nothing is broken .

But as i adding more feature i just recently testing it so as i click on the delete button its not showing response as i check the console its showing internal server error

Its also showing this

{
  "error": {
    "message": "Unsupported GET-request to mutation procedure at path \"deleteForm.delete\"",
    "code": -32005,
    "data": {
      "code": "METHOD_NOT_SUPPORTED",
      "httpStatus": 405,
      "stack": "TRPCError: Unsupported GET-request to mutation procedure at path \"deleteForm.delete\"\n    at /Users/uveshtyagi/trpc-monorepo/node_modules/.pnpm/@trpc+server@11.8.1_typescript@5.9.3/node_modules/@trpc/server/dist/resolveResponse-ByfQ6olt.cjs:1920:67\n    at Array.map (\u003Canonymous\u003E)\n    at Object.resolveResponse (/Users/uveshtyagi/trpc-monorepo/node_modules/.pnpm/@trpc+server@11.8.1_typescript@5.9.3/node_modules/@trpc/server/dist/resolveResponse-ByfQ6olt.cjs:1911:31)\n    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)\n    at async /Users/uveshtyagi/trpc-monorepo/node_modules/.pnpm/@trpc+server@11.8.1_typescript@5.9.3/node_modules/@trpc/server/dist/node-http-D0T_XJ9C.cjs:203:22",
      "path": "deleteForm.delete"
    }
  }

So I start inspecting the issue first i check the server there is noting wrong then i check my service of database there is also everything ,also its showing "unsupported GET-request but its not get request its a post req so i have to check the procedure ,we also call their mutation in trpc their is only two thing we used "query" for get the data ,and for any req we use "mutation" so its also fine then i also check the hook as we are using trpc react hook and tanstack query there is also we are using "useMutation" so then whats the error ?,its took my hour to hit and trial i can directly jump to the gpt but then i have nothing to learn also i check the trpc client maybe that override the post request to the GET but its absolutely fine so this is the bug i dont know i also then ask gpt its aslo give the mention step but its not work ..

How i found it ?

So after every hit and trial i start to check the my db here my db schema of field table and here is the formId as foreign key :

import {
  pgTable,
  uuid,
  timestamp,
  varchar,
  pgEnum,
  text,
  boolean,
  numeric,
} from "drizzle-orm/pg-core";
import { userTable } from "./user";
import { formsTable } from "./form";

export const feildTypeEnum = pgEnum("feild_type_enum", [
  "EMAIL",
  "TEXT",
  "NUMBER",
  "YES_NO",
  "PASSWORD",
]);

export const formsFeildsTable = pgTable("forms_feild", {
  id: uuid("id").primaryKey().defaultRandom(),
  formId: uuid("form_id").references(() => formsTable.id),
  label: varchar("label", { length: 100 }).notNull(),
  labelKey: varchar("label_key", { length: 100 }).notNull(),
  description: text("description"),
  placeholder: text("placeholder"),
  isRequired: boolean("is_required").default(false).notNull(),
  index: numeric("index").notNull(),
  type: feildTypeEnum("type").notNull(),

  createdAt: timestamp("created_at").defaultNow(),
  updatedAt: timestamp("updated_at").$defaultFn(() => new Date()),
});

So one thing i assume myself that as i delete the form ,i don't need to delete the fields as in form there is also fields in the form ,because if i delete the form then its automatically not showing the field they have in the Db but not showing in the UI ,but this is one of the of wrong assumption because field table point to the form :

So what happen as we click the delete button we give command to the Db that delete the form where form.id =FormId but there is problem there is also field table which refer to the form table so the PostgreSQL reject it that we can't delete the parent because children still exist and pointing to the form table but I assumed that its delete it ,so this is the main problem .

How I fix it and how this work seamlessly before ?

So yeah this is the valid question when i test it ,Its work fine so why this inconsistent behaviour nah Its work because when we create the form we don't create the field so there is no child so its not showing any bug thats it .

So now whats the solution so we have a configuration when we writing the schema that reference to that forms table as we delete that cascade the delete also to the field so as we click delete filed also delete we don't have to manually make the db call and thats solve the bug :)

export const formsFeildsTable = pgTable("forms_feild", {
  id: uuid("id").primaryKey().defaultRandom(),
  formId: uuid("form_id").references(() => formsTable.id,{
    onDelete:"cascade"
  }),

Some time its better to inspect yourself if you are learning start to debug yourself ,read the bug hit and trial do google atleast try to do for 30 minute bug teach you more than the tutorial today u can solve those by gpt and you make your fundamental weak its your choice so be happy and do whaterver you want to do :))

Back to all posts