Issue with Workers / Nuxt / D1 via Drizzle

Hi,

When I deploy my app to cloudflare workers, I get a 500 error when retrieving data from my database on initial load, if I use the refresh method to get the data again it works fine. Locally works fine on page load.

This is how I am using drizzle:

server/api/users.get.ts:

import { users } from '../db/schema'
import { useDatabase } from '../utils/db'

export default defineEventHandler(async (event) => {
  const db = useDatabase(event)

  const existingUsers = await db.select().from(users)

  if (existingUsers.length < 1) {
    await db.insert(users).values({ email: 'test@test.com' })
  }

  return await db.select({ email: users.email}).from(users)
})

import { users } from '../db/schema'
import { useDatabase } from '../utils/db'

export default defineEventHandler(async (event) => {
  const db = useDatabase(event)

  const existingUsers = await db.select().from(users)

  if (existingUsers.length < 1) {
    await db.insert(users).values({ email: 'test@test.com' })
  }

  return await db.select({ email: users.email}).from(users)
})

useDatabase helper:

import { drizzle } from 'drizzle-orm/d1'
import type { H3Event } from 'h3'

export function useDatabase(event: H3Event) {
  return drizzle(event.context.cloudflare.env.DB)
}

import { drizzle } from 'drizzle-orm/d1'
import type { H3Event } from 'h3'

export function useDatabase(event: H3Event) {
  return drizzle(event.context.cloudflare.env.DB)
}

app.vue:

<script setup lang="ts">
const { data, error, refresh } = useFetch("/api/users");
</script>

<template>
  <div>
    <NuxtRouteAnnouncer />
    {{ data }}

    <div v-if="error">{{ error }}</div>

    <button @click="refresh">Refresh</button>
  </div>
</template>

<script setup lang="ts">
const { data, error, refresh } = useFetch("/api/users");
</script>

<template>
  <div>
    <NuxtRouteAnnouncer />
    {{ data }}

    <div v-if="error">{{ error }}</div>

    <button @click="refresh">Refresh</button>
  </div>
</template>

My question is - what am I doing wrong?

Cloudflare Developers•10mo ago

BiffBaffBoff

Issue with Workers / Nuxt / D1 via Drizzle

import { users } from '../db/schema'
import { useDatabase } from '../utils/db'

export default defineEventHandler(async (event) => {
  const db = useDatabase(event)

  const existingUsers = await db.select().from(users)

  if (existingUsers.length < 1) {
    await db.insert(users).values({ email: 'test@test.com' })
  }

  return await db.select({ email: users.email}).from(users)
})

import { users } from '../db/schema'
import { useDatabase } from '../utils/db'

export default defineEventHandler(async (event) => {
  const db = useDatabase(event)

  const existingUsers = await db.select().from(users)

  if (existingUsers.length < 1) {
    await db.insert(users).values({ email: 'test@test.com' })
  }

  return await db.select({ email: users.email}).from(users)
})

useDatabase helper:

import { drizzle } from 'drizzle-orm/d1'
import type { H3Event } from 'h3'

export function useDatabase(event: H3Event) {
  return drizzle(event.context.cloudflare.env.DB)
}

import { drizzle } from 'drizzle-orm/d1'
import type { H3Event } from 'h3'

export function useDatabase(event: H3Event) {
  return drizzle(event.context.cloudflare.env.DB)
}

app.vue:

<script setup lang="ts">
const { data, error, refresh } = useFetch("/api/users");
</script>

<template>
  <div>
    <NuxtRouteAnnouncer />
    {{ data }}

    <div v-if="error">{{ error }}</div>

    <button @click="refresh">Refresh</button>
  </div>
</template>

<script setup lang="ts">
const { data, error, refresh } = useFetch("/api/users");
</script>

<template>
  <div>
    <NuxtRouteAnnouncer />
    {{ data }}

    <div v-if="error">{{ error }}</div>

    <button @click="refresh">Refresh</button>
  </div>
</template>

My question is - what am I doing wrong?

Issue with Workers / Nuxt / D1 via Drizzle

Similar Threads

Issue with Workers / Nuxt / D1 via Drizzle

Similar Threads

Similar Threads

Similar Threads