Drizzle Team•8mo ago

How to use vercel postgres in localhost?

I have set up drizzle according to the docs, and can use drizzle kit to run migrations alright. (I have seen the tables created in vercel dashboard). Still, when I try to use any drizzle functions in my sveltekit app, I get a websocket error. Any idea what I need to do to get vercel-postgres working? Here's the relevant code and errors:

1 Reply

Ricardo RomeroOP•8mo ago

// schema.ts
import { drizzle } from "drizzle-orm/vercel-postgres";
import { sql } from "@vercel/postgres";
import {
  pgTable,
  serial,
  uuid,
  doublePrecision,
  integer,
  text,
} from "drizzle-orm/pg-core";
import { relations } from "drizzle-orm";

/**
 * @docs https://orm.drizzle.team/docs/sql-schema-declaration
 */
export const db = drizzle(sql);

export const users = pgTable("users", {
  // ...
});

// ... more tables and relations

// schema.ts
import { drizzle } from "drizzle-orm/vercel-postgres";
import { sql } from "@vercel/postgres";
import {
  pgTable,
  serial,
  uuid,
  doublePrecision,
  integer,
  text,
} from "drizzle-orm/pg-core";
import { relations } from "drizzle-orm";

/**
 * @docs https://orm.drizzle.team/docs/sql-schema-declaration
 */
export const db = drizzle(sql);

export const users = pgTable("users", {
  // ...
});

// ... more tables and relations

// Drizzle.ts
import * as schema from "../schema";
import { users, api_keys } from "../schema";

import { drizzle } from "drizzle-orm/vercel-postgres";
import { eq } from "drizzle-orm";
import { sql } from "@vercel/postgres";

export { createApiKey, getUserWithApiKeys };

const db = drizzle(sql, { schema });

const getUserWithApiKeys = async (clerkUserId: string) =>
  db.query.users.findFirst({
    where: (users) => eq(users.clerkUserId, clerkUserId),
    columns: { balance: true },
    with: { api_keys: { columns: { value: true } } },
  });

// Drizzle.ts
import * as schema from "../schema";
import { users, api_keys } from "../schema";

import { drizzle } from "drizzle-orm/vercel-postgres";
import { eq } from "drizzle-orm";
import { sql } from "@vercel/postgres";

export { createApiKey, getUserWithApiKeys };

const db = drizzle(sql, { schema });

const getUserWithApiKeys = async (clerkUserId: string) =>
  db.query.users.findFirst({
    where: (users) => eq(users.clerkUserId, clerkUserId),
    columns: { balance: true },
    with: { api_keys: { columns: { value: true } } },
  });

The crash is ocurring on page load, when I load a page that will try to run getUserWithApiKeys server-side. Here's the error I'm getting:

[Clerk SvelteKit] Session verified successfully.
hooks.server.handleError Error: All attempts to open a WebSocket to connect to the database failed. Please refer to https://github.com/neondatabase/serverless/blob/main/CONFIG.md#websocketconstructor-typeof-websocket--undefined. Details: fetch failed
    at file:///Users/moro/semiotic/sql-studio-webapp/node_modules/@neondatabase/serverless/index.mjs:1339:74
    at async VercelPgPreparedQuery.execute (file:///Users/moro/semiotic/sql-studio-webapp/node_modules/drizzle-orm/vercel-postgres/session.js:39:22)
    at async load (/Users/moro/semiotic/sql-studio-webapp/src/routes/+page.server.ts:22:18)
    at async Module.load_server_data (/Users/moro/semiotic/sql-studio-webapp/node_modules/@sveltejs/kit/src/runtime/server/page/load_data.js:61:17)
    at async eval (/Users/moro/semiotic/sql-studio-webapp/node_modules/@sveltejs/kit/src/runtime/server/page/index.js:140:13) Internal Error /
onError {
  error: Error: All attempts to open a WebSocket to connect to the database failed. Please refer to https://github.com/neondatabase/serverless/blob/main/CONFIG.md#websocketconstructor-typeof-websocket--undefined. Details: fetch failed
      at file:///Users/moro/semiotic/sql-studio-webapp/node_modules/@neondatabase/serverless/index.mjs:1339:74
      at async VercelPgPreparedQuery.execute (file:///Users/moro/semiotic/sql-studio-webapp/node_modules/drizzle-orm/vercel-postgres/session.js:39:22)
      at async load (/Users/moro/semiotic/sql-studio-webapp/src/routes/+page.server.ts:22:18)
      at async Module.load_server_data (/Users/moro/semiotic/sql-studio-webapp/node_modules/@sveltejs/kit/src/runtime/server/page/load_data.js:61:17)
      at async eval (/Users/moro/semiotic/sql-studio-webapp/node_modules/@sveltejs/kit/src/runtime/server/page/index.js:140:13),
  message: 'Internal Error',
  status: 500
}

[Clerk SvelteKit] Session verified successfully.
hooks.server.handleError Error: All attempts to open a WebSocket to connect to the database failed. Please refer to https://github.com/neondatabase/serverless/blob/main/CONFIG.md#websocketconstructor-typeof-websocket--undefined. Details: fetch failed
    at file:///Users/moro/semiotic/sql-studio-webapp/node_modules/@neondatabase/serverless/index.mjs:1339:74
    at async VercelPgPreparedQuery.execute (file:///Users/moro/semiotic/sql-studio-webapp/node_modules/drizzle-orm/vercel-postgres/session.js:39:22)
    at async load (/Users/moro/semiotic/sql-studio-webapp/src/routes/+page.server.ts:22:18)
    at async Module.load_server_data (/Users/moro/semiotic/sql-studio-webapp/node_modules/@sveltejs/kit/src/runtime/server/page/load_data.js:61:17)
    at async eval (/Users/moro/semiotic/sql-studio-webapp/node_modules/@sveltejs/kit/src/runtime/server/page/index.js:140:13) Internal Error /
onError {
  error: Error: All attempts to open a WebSocket to connect to the database failed. Please refer to https://github.com/neondatabase/serverless/blob/main/CONFIG.md#websocketconstructor-typeof-websocket--undefined. Details: fetch failed
      at file:///Users/moro/semiotic/sql-studio-webapp/node_modules/@neondatabase/serverless/index.mjs:1339:74
      at async VercelPgPreparedQuery.execute (file:///Users/moro/semiotic/sql-studio-webapp/node_modules/drizzle-orm/vercel-postgres/session.js:39:22)
      at async load (/Users/moro/semiotic/sql-studio-webapp/src/routes/+page.server.ts:22:18)
      at async Module.load_server_data (/Users/moro/semiotic/sql-studio-webapp/node_modules/@sveltejs/kit/src/runtime/server/page/load_data.js:61:17)
      at async eval (/Users/moro/semiotic/sql-studio-webapp/node_modules/@sveltejs/kit/src/runtime/server/page/index.js:140:13),
  message: 'Internal Error',
  status: 500
}

The linked docs only tell me how to configure a neon database, which I know is the technology vercel is using. Sadly, the API neon seems to suggest using in the linked docs doesn't seem to exist for the vercel postgres package I've searched quite a bit around. The only other people I have found online talking about using drizzle and vercel-postgres together recommend checking the current environment and selecting a different database driver depending on that. I'm honestly bummed out by this. I don't think it's a good idea to use different database drivers in development and production. I'm using postgresjs for local development for the time being, but I'm already looking into using something other than vercel-postgres. The main reason is that I think it's going to be hell to debug if any behavior is different between postgres and vercel-postgres drivers. Hope this helps someone that stumbles into the same issue later.

Gaming

Programming

How to use vercel postgres in localhost?