Cloudflare D1 Binding can't be recognized inside routeLoader

[maiden kernel]

Hey, so I've been following the cloudflare's framework guide for qwik which demonstrates the usage of d1 bindings inside a qwik-app. What I am trying to achieve is just to insert data inside my production d1 so the online one and not local one in a cloudflare worker. I was creating the bindings on the cloudflare dashboard and setup everything correctly and carefuly followed the guideline here https://developers.cloudflare.com/pages/framework-guides/deploy-a-qwik-site/#use-bindings-in-your-qwik-application and it still can't recognize my DB somehow. Any approach by you guys, because I am frustrated as I can't access my D1 Database inside my cloudflare page (so the qwik app) for like several days already... -.-

import type { D1Database, D1PreparedStatement } from "@cloudflare/workers-types";

export const useUserRegistrationAction = routeAction$(async ({ email, username, password }, { fail, platform }) => {
    const errors = []
    if(!(new RegExp(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/).test(email))) {
        errors.push("Ungültige E-Mail-Adresse.")
    }
    const passwordLength = 8
    if(password.length < passwordLength) {
        errors.push(`Passwort muss mindestens ${passwordLength} Zeichen lang sein.`)
    }
    if(errors.length > 0) {
        return fail(400, {
            messages: errors
        })
    }
    const passwordHash = await bcryptjs.hash(password, 10)
    try{
        // @ts-ignore
        const { HEALTHYINSPECTION_DB } = (platform as { HEALTHYINSPECTION_DB: D1Database })
        const preparedStatement: D1PreparedStatement = HEALTHYINSPECTION_DB
            .prepare(`insert into account ('Email', 'Username', 'Password') values ('${email}', '${username}', '${passwordHash}')`)
        const data = await preparedStatement.run()
        return data.results[0].id
    } catch (error) {
        if(error instanceof Error) {
            return fail(400, {
                messages: [ error.message ]
            })
        }
    }
}, zod$({
    email: z.string(),
    username: z.string(),
    password: z.string()
}))

[pure breach]

When you say it doesn’t recognise the binding, is this in local dev or when running in production ?

[maiden kernel]

both. when running it as npm run dev (local dev) and when commiting stuff to github so that it's in production. it doesn't matter.

[pure breach]

So, in dev it definitely won’t work if running with vite dev server — you have to build (npm run build) and then run wrangler pages dev on the build folder

You’ll also need to create the bindings locally on the wrangler config file for wrangler dev to work properly (or via CLI arguments) as it won’t read the ones from prod

Im not sure why the prod bindings would not work when deployed though, they should

Actually I see the issue, and it seems to be a mistake in the CF docs for qwik, the bindings are under platform.env not directly under platform

That should fix your issue in prod

I’m planning to spend the slow time before xmas improving the qwik CF adapter and docs… hoping to provide some better examples and improve the integration of wrangler and vite dev server

[maiden kernel]

already done inside the cloudflare worker which is located in ./database of my qwik-app:

[maiden kernel]

as shown in the screenshot below, it's still even with that change not being recognized at all...:

here's a little code snippet which demonstrates my approach of a request:

    try{
        const { HEALTHYINSPECTION_DB } = (platform.env as { HEALTHYINSPECTION_DB: D1Database })
        const preparedStatement: D1PreparedStatement = HEALTHYINSPECTION_DB
            .prepare(`insert into account ('Email', 'Username', 'Password') values ('${email}', '${username}', '${passwordHash}')`)
        const data = await preparedStatement.run()
        return data.results[0].id
    } catch (error) {
        if(error instanceof Error) {
            return fail(400, {
                messages: [ error.message ]
            })
        }
    }

[pure breach]

Is this in production or dev though? In production the wrangler.toml settings are not used for pages projects and instead the bindings have to be configured in the dashboard

In dev, this should work provided you run it with wrangler (not vite) and ensure the toml file is being read (since it’s in a folder, it might not look there automatically depending on where you’re running it from)

I’m away currently for xmas but when I’m back if you’re still having issues I can try and help you with a sample repo that uses cf bindings

[maiden kernel]

Neither production nor dev works right now with the wrangler.toml config shown in the screenshot above... 😦
I already configured the bindings for production usage via the dashboard, so no worries about that (in the screenshot below this message you're currently reading there's being shown my d1 db binding for my worker...):

Also, the same binding exists for the -page so basically the qwik-app itself. It's the exact same d1 db binding there for production and preview!
(Refer to this screenshot to get what I mean):

[maiden kernel]

I was trying it locally for dev with the command npx wrangler dev inside a subdirectory of my qwik app called "database". This is how my file structure of the worker looks like at the moment (you can rely on the underlined files in this screenshot):

[maiden kernel]

This would be neat. Thanks in advance anyway for fixing the provided code snippet from -docs (talking about the 'platform.dev' part) 🙂

[maiden kernel]

@pure breach Hey it's been quite a while, did you took a look into it? 😄

[maiden kernel]

I guess I'll take that as a no 😂