BiffBaffBoff Posts - Answer Overflow

BiffBaffBoff

Explore posts from servers

NNuxt CDCloudflare Developers DTDrizzle Team

•Created by BiffBaffBoff on 4/21/2025 in #workers-help

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: '[email protected]' })
  }

  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: '[email protected]' })
  }

  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?

1 replies

CDCloudflare Developers

•Created by BiffBaffBoff on 4/20/2025 in #pages-help

nuxt / drizzle / cloudflare

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: '[email protected]' })
  }

  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: '[email protected]' })
  }

  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?

1 replies

NNuxt

•Created by BiffBaffBoff on 4/20/2025 in #❓・help

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: '[email protected]' })
  }

  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: '[email protected]' })
  }

  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?

6 replies

NNuxt

•Created by BiffBaffBoff on 2/20/2025 in #❓・help

Access Cloudflare bindings from scheduled task

Is it possible to access the cloudflare bindings on the context in a scheduled task? I have this in my run method:

async run() {
    const { DB } = useEvent().context.cloudflare.env
    const db = initializeDrizzle(DB)
    ...

async run() {
    const { DB } = useEvent().context.cloudflare.env
    const db = initializeDrizzle(DB)
    ...

But I get this error:

[nitro] Error while running scheduled task "db:resync" Nitro request context is not available. Note: This is an experimental feature and might be broken on non-Node.js environments.

[nitro] Error while running scheduled task "db:resync" Nitro request context is not available. Note: This is an experimental feature and might be broken on non-Node.js environments.

So my question is, is there a way to access my d1 as I need to pass the d1 which is on my cloudflare env to drizzle Thanks

5 replies

NNuxt

•Created by BiffBaffBoff on 9/6/2024 in #❓・help

Cloudflare pages preset

Hi, if I'm hosting my nuxt app in cloudflare, do I need to still set this preset?

  nitro: {
    preset: 'cloudflare-pages',
  },

  nitro: {
    preset: 'cloudflare-pages',
  },

The reason I ask, is that I want to do some image manipulation in my api route so I'm using sharp but this doesnt seem compatible when I use that preset? I guess this is out of the realm of here - but - is there another image manipulation library I can do which is compatible with cloudflare pages environment? Thanks

3 replies

DTDrizzle Team

•Created by BiffBaffBoff on 1/5/2024 in #help

Aggregation with Query API

Hi, is it possible to do aggregation via the query API? I have to do the following at the moment, then I do a form.submissions.length to get the current count. Can it be simplified?

const res = await db.query.formsTbl.findMany({
    where: (forms, { eq }) => eq(forms.createdBy, user.userId),
    with: {
      submissions: {
        columns: {
          id: true,
        },
      },
    },
  })

const res = await db.query.formsTbl.findMany({
    where: (forms, { eq }) => eq(forms.createdBy, user.userId),
    with: {
      submissions: {
        columns: {
          id: true,
        },
      },
    },
  })

Thanks

3 replies

DTDrizzle Team

•Created by BiffBaffBoff on 12/20/2023 in #help

How to use the Batch API?

Hi, I am using Turso and have an array of people I need to insert into my database. I've tried via db.insert(people).values(peopleArray) but get an error about too many variables or something so then I looked into the batch API, but this doesnt work either:

db.batch(peopleArray.map(p => db.insert(people).values(p))

db.batch(peopleArray.map(p => db.insert(people).values(p))

But I can do something like this which works for a single entry?

const person = { id: 1, name: "Tester" }
const ins = db.insert(people).values(person)
db.batch([ins])

const person = { id: 1, name: "Tester" }
const ins = db.insert(people).values(person)
db.batch([ins])

So why can't I do something similar with an array?

7 replies

Gaming

Programming