D1 Integration into Qwik-Frontend?

Original message was deleted

proudyyyy•12/12/23, 7:52 PM

Hey, I wonder how to integrate d1 databases into qwik. I mean I already got it integrated inside my qwik project with an index.ts file which handles locally pathnames (talking about "/api/tableName") and a schema.sql which creates my database, but I don't know how to manipulate tableData inside my source code of my qwik-project. I know that I can manually insert data into those tables using the already existing schema.sql, but that's then inside the d1 database project which itself is nested in the qwik-app. And the fetch-function is indeed accessible from outside so in the front-end of the qwik-app but where do I get the parameters request, env from? Are those injected? So all in all my question is: How to integrate D1 databases into my frontend of the qwik-app? Can you help me out at all with this or should this thread correspond to the qwik discord-server?

Thanks in advance!

Matt Silverlock•12/12/23, 8:00 PM

https://developers.cloudflare.com/pages/framework-guides/deploy-a-qwik-site/#use-bindings-in-your-qwik-application

Deploy a Qwik site · Cloudflare Pages docs

Qwik is an open-source, DOM-centric, resumable web application framework designed for best possible time to interactive by focusing on resumability , …

proudyyyy•12/12/23, 8:30 PM

Hey @Matt, thank you for your quite fast response! I appreciate that a lot.

The page you've linked does contain a code-snippet which shows how to do that with KV, but not how to do it with D1. Is there an object available called D1Namespace, or something else so I can replace that code-snippet example so that it suits for d1 databases?

proudyyyy•12/12/23, 8:47 PM

also, I have added in both production and preview the d1 database bindings for my database to use it later on inside my qwik project, and then I redeployed the wrangler. But in the console, it has only access to the default one called "DB" (available by default by the tutorial for creating one). There's has also somehow no new bindings been added inside my wrangler.toml-file!

Matt Silverlock•12/12/23, 8:50 PM

I would suggest going through the D1 tutorial first: https://developers.cloudflare.com/d1/get-started/
- without Qwik
You will see that the D1 type is D1DatabaseD1Database in the D1 docs: https://developers.cloudflare.com/d1/get-started/#write-queries-within-your-worker

Get started · Cloudflare D1 docs

This guide will instruct you through:

Matt Silverlock•12/12/23, 8:50 PM

```
wrangler.toml
```
```
wrangler.toml
```
does not apply to a Pages project per the Qwik framework guide I shared with you. That's why DBDB doesn't appear. You're looking at both a Worker project and a separate Pages project.

proudyyyy•12/13/23, 5:05 PM

This looks correct, thanks already for step one. I followed the guided step by step and it worked out decently. Thank you so much first of all for this. I love it that I can manage the entire database with a GUI, that's neat!

Matt Silverlock•12/13/23, 5:31 PM

Great! Glad you got it working!

proudyyyy•12/13/23, 5:32 PM

I have doubts now though about the security of the production data, as it's accessible for basically everyone in case he knows the custom domain I just setup for it. Is there some sort of encryption available for it something like an apiKey which is made out of a generated UUID?

proudyyyy•12/13/23, 5:33 PM

What I am exactly talking about is that currently people can access it with the custom domain without any stress which is unsafe:

MMatt Silverlock 1. I would suggest going through the D1 tutorial first: https://developers.cloud...

proudyyyy•12/13/23, 5:42 PM

Also, I want to refer with this message you are currently reading to the second step of your guideline right now - So do I get that right, that you can only write queries inside workers and not the pages. So the only way to gain the data is by the custom worker url I have now and deserialize the json data to an object? Or do I miss something and it's possible to have access to the production data from inside a qwik page? I am sorry if I repeat a question from earlier but I just want to get sure. I am apologizing myself already in advance in case I repeated my question.

Pproudyyyy Also, I want to refer with this message you are currently reading to the second ...

Matt Silverlock•12/13/23, 5:49 PM

Your screenshot shows you deploying a Worker -

Matt Silverlock•12/13/23, 5:49 PM

But you can access D1 directly inside Pages - per the guide I shared. It's the same as KV.

proudyyyy•12/13/23, 6:14 PM

Oh, I didn't knew I have to install a separate package for this which contains the typescript type declaration you've mentioned. That's what I was missing.

MMatt Silverlock https://developers.cloudflare.com/pages/framework-guides/deploy-a-qwik-site/#use...

proudyyyy•12/13/23, 6:18 PM

Ah and if I recall that correctly, the qwik cloudflare page can not only work with the local d1 but also with the production one being public on the cloudflare servers?

Also, how can I fix the problem with unauthorized people can access the custom subdomain for my worker? Is there a workaround for it or can't this be forbidden for unauthorized people?

proudyyyy•12/13/23, 8:34 PM

Here's a relevant code snippet about my production d1 binding inside my qwik-app, and it's not being recognized somehow. Do you know why this might happen?

proudyyyy•12/15/23, 7:38 AM

@elithrar Can you think of an approach for how to handle this?

proudyyyy•12/15/23, 7:50 AM

I am asking for advice because I can't figure out why it's not working though there's a binding in production & preview for my page which binds the d1 database to a name I am using inside the page's code like shown above:

Matt Silverlock•12/15/23, 11:40 AM

If you are running this in local dev via

wrangler pages dev

wrangler pages dev

you need to pass the binding

Matt Silverlock•12/15/23, 11:41 AM

https://developers.cloudflare.com/pages/functions/bindings/#interact-with-your-d1-databases-locally

Bindings · Cloudflare Pages docs

A binding enables your Pages Functions to interact with resources on the Cloudflare developer platform. Use bindings to integrate your Pages Functions …

proudyyyy•12/15/23, 11:46 AM

What's meant with <OUTPUT_DIR>?

proudyyyy•12/15/23, 11:47 AM

Also, in wrangler.toml file inside the worker, I don't have to apply my custom binding as well so the name there right? Talking about to change there the binding's name to my custom one as well

Matt Silverlock•12/15/23, 12:46 PM

Your binding MUST be the same in all places.

proudyyyy•12/15/23, 7:26 PM

I just figured out that in database here on this screenshot, there wasn't a d1 binding inside there but ONLY in the healthyinspection one.

Pproudyyyy I am asking for advice because I can't figure out why it's not working though th...

proudyyyy•12/15/23, 7:27 PM

Talking about this one. It was in "healthyinspection", but not set properly in "database"...

proudyyyy•12/15/23, 7:27 PM

I thinkl that was causing some issues as well

proudyyyy•12/15/23, 7:32 PM

Uh, I don't have any clue about .toml syntax, but cloudflare now wrote me this code snippet I just pasted inside my wrangler.toml now to change the binding...

D1 Integration into Qwik-Frontend?

Similar Threads

Similar Threads

Similar Threads