NuxtN
Nuxt•10mo ago•
5 replies
BiffBaffBoff

Drizzle / useFetch / cloudflare error on deployment

Hi,

When I deploy my app to cloudflare, 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)
})


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)
}


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>


My question is - what am I doing wrong?
Was this page helpful?