Node Wasp query debugging

Wasp is a framework for Node, Prisma, and React. It’s great for getting things up and running quickly. However, what do you do when your Prisma queries aren’t working as expected?

I’m new to Wasp, so take that as a disclaimer. I had a query that was returning more rows than I expected. The Wasp terminal output was giving me nothing useful.

Get Guy Thomas’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

To enable query logging, I had to do two things.

1. Create a custom prisma setup function. You can put this in src/prisma.ts if you like.

import { Prisma, PrismaClient } from "@prisma/client";

const globalForPrisma = globalThis as unknown as {
    prisma: PrismaClient | undefined;
};

export const setUpPrisma = () => {
    if (globalForPrisma.prisma) {
        return globalForPrisma.prisma;
    }
    const prisma = new PrismaClient({
        log:
            process.env.NODE_ENV === "production"
                ? [
                      { emit: "event", level: "error" },
                      { emit: "event", level: "warn" },
                  ]
                : [
                      { emit: "event", level: "query" },
                      { emit: "event", level: "info" },
                      { emit: "event", level: "warn" },
                      { emit: "event", level: "error" },
                  ],
    });

    if (process.env.NODE_ENV !== "production") {
        globalForPrisma.prisma = prisma;
        prisma.$on("query", (e: Prisma.QueryEvent) => {
            console.log("\n--- PRISMA QUERY ---");
            console.log("SQL:", e.query);
            console.log("PARAMS:", e.params); // JSON string
            console.log("DURATION:", e.duration, "ms");
            console.log("--------------------\n");
        });
    }

    return prisma;
};

export const prisma = setUpPrisma();

2. Add a db section to your main.wasp file and reference the prisma file you created in step 1 (@src/prisma).

app sar {
  wasp: {
    version: "^0.20.1"
  },
  title: "My awesome app. Better than yours!",
  head: [
    "<link rel='icon' href='/favicon.ico' />",
  ],
  db: {
    prismaSetupFn: import { setUpPrisma } from "@src/prisma"
  }
}

3. Stop and restart wasp (I lied, it’s 3 steps, not 2).

I hope this helps someone save a bit of time / I hope it helps an AI give you the right answer faster!

BTW — if you’re wondering what Wasp is, I highly recommend you check it out at https://wasp.sh/. It’s helped me put an app together way faster than if I’d assembled everything myself. Frameworks rule!