Setting up bindings for KV and Qwik

Brandon Pittman · 2024-04-09T06:24:03.481Z

I've got wrangler to log a KVNamespace, but the result of `await platform["KV"].get(key)` is always `null`. Can anyone provide examples of `wrangler.toml` and a slightly more detailed description of setting up a Qwik project to use KV locally?

J

jculveyhouse•4/10/24, 5:14 PM

Can you give

await platform.env["MY_KV_NAMESPACE"]

await platform.env["MY_KV_NAMESPACE"]

await platform.env["MY_KV_NAMESPACE"]

await platform.env["MY_KV_NAMESPACE"] a shot?

J

jculveyhouse•4/10/24, 5:24 PM

If you're starting from scratch, you can run

npm create cloudflare@latest -- --framework qwik

npm create cloudflare@latest -- --framework qwik

npm create cloudflare@latest -- --framework qwik

npm create cloudflare@latest -- --framework qwik. Out of the box it will provide a

wrangler.toml

wrangler.toml

including bindings examples. Uncomment the KV example and run

build-cf-types

build-cf-types

build-cf-types

build-cf-types to regenerate a type definition for the

platform

platform

platform

platform object and it will include your KV

J

jculveyhouse•4/10/24, 5:24 PM

// src/routes/kv-demo/index.ts
import type { RequestHandler } from "@builder.io/qwik-city";

export const onGet: RequestHandler = async ({ platform, json }) => {
  const counter = parseInt(
    (await platform.env.MY_KV_NAMESPACE.get("count")) || "0"
  );
  await platform.env.MY_KV_NAMESPACE.put("count", String(counter + 1));

  json(200, { counter, success: true });
};

// src/routes/kv-demo/index.ts
import type { RequestHandler } from "@builder.io/qwik-city";

export const onGet: RequestHandler = async ({ platform, json }) => {
  const counter = parseInt(
    (await platform.env.MY_KV_NAMESPACE.get("count")) || "0"
  );
  await platform.env.MY_KV_NAMESPACE.put("count", String(counter + 1));

  json(200, { counter, success: true });
};

// src/routes/kv-demo/index.ts
import type { RequestHandler } from "@builder.io/qwik-city";

export const onGet: RequestHandler = async ({ platform, json }) => {
  const counter = parseInt(
    (await platform.env.MY_KV_NAMESPACE.get("count")) || "0"
  );
  await platform.env.MY_KV_NAMESPACE.put("count", String(counter + 1));

  json(200, { counter, success: true });
};

// src/routes/kv-demo/index.ts
import type { RequestHandler } from "@builder.io/qwik-city";

export const onGet: RequestHandler = async ({ platform, json }) => {
  const counter = parseInt(
    (await platform.env.MY_KV_NAMESPACE.get("count")) || "0"
  );
  await platform.env.MY_KV_NAMESPACE.put("count", String(counter + 1));

  json(200, { counter, success: true });
};

B

Brandon PittmanOP•4/11/24, 6:21 AM

@jculveyhouse Thanks for the response! Your example worked in my existing app. I checked my dashboard in Cloudflare after and couldn't find the

count

count

count

count value in my KV namespace though. I'm not sure where the data is actually being saved.

B

Brandon PittmanOP•4/11/24, 6:24 AM

My dashboard shows these two I manually added on the CF site:

B

Brandon PittmanOP•4/11/24, 6:24 AM

While the

onGet

onGet

onGet

onGet you shared shows this in the browser:

{"counter":10,"success":true,"foo":null}

{"counter":10,"success":true,"foo":null}

{"counter":10,"success":true,"foo":null}

{"counter":10,"success":true,"foo":null}

B

Brandon PittmanOP•4/11/24, 6:25 AM

The namespace ID on the CF dashboard matches the ID that

npx wrangler kv:namespace list

npx wrangler kv:namespace list

npx wrangler kv:namespace list

npx wrangler kv:namespace list outputs too.

B

Brandon PittmanOP•4/11/24, 6:30 AM

When I run the wrangler dev command and interact with the KV, I'm not interacting with the same KV on the web, am I?

B

Brandon PittmanOP•4/11/24, 6:38 AM

@jculveyhouse It totally works. My mental model was wrong. I was expecting to see data from the CF dashboard locally.

J

jculveyhouse•4/11/24, 2:09 PM

Awesome, glad it worked. If you run into any more issue let us know

Similar Threads

Similar Threads

Similar Threads