Create a New Cloudflare Workers Project with Wrangler

Create a Cloudflare Workers KV Namespace

Write Data to Cloudflare Workers KV Store with BINDING.put

Read Data from Cloudflare Workers KV with BINDING.get 

Set Complex Key Values in a Cloudflare Workers KV Namespace

Update Cloudflare Workers KVs Data from an API Route

Filter Data with Cloudflare Workers KV Keys

Edit Stored Data using the Cloudflare KV Key

Identify Users in a Cloudflare Worker by IP to Serve User-specific Data

Build Data-Driven Applications on the Edge with Workers and Workers KV

We've learned how to write and receive data from our database, but we've only done it with fairly simple values. Now we are going to see how to do the same thing but with complex key values. There are two ways of doing this. One is the default route where we just return the value back from our KV. The second is where one route takes in a name parameter and sets it as the value for a key. The second path is the one we are going to look at in this lesson. 

https://app.egghead.io/api/v1/lessons/cloudflare-set-complex-key-values-in-a-cloudflare-workers-kv-namespace/subtitles

Kristian Freeman: [0:00] In order to understand how KV works in more complex applications, let's take a look at how to set complex key values inside of a KV namespace.

[0:08] In order to do that, I'm going to make a slightly more complicated example, one where one route takes in a name parameter and sets it as the value for a key, then the default route, which is the one we're using right now, which will return that value back from KV.

[0:24] In order to do that, I'm first going to look at the request and get the URL out of it. Const URL= a new instance of the URL class, passing in URL from inside of this request argument.

[0:36] With that, I can do things like if URL.pathname= "set," then do one thing, "else," do something for basically the rest of every other potential URL.pathname.

[0:49] Inside of this conditional here, I'm going to look for the presence of a name parameter. To do that, I'll say const Name=URL.searchParams.getName. If there is no name here, maybe I'll default to something like "Kristian."

[1:07] What I'm going to do is I'm going to take this await myfirstKV.put key here. For the name here, I'm going to set this to user. Instead of passing a plain string value here, I'm going to show you how you can use complex data structures, like JSON objects, and store them inside of KV.

[1:25] To do that, I'm going to set up this variable user. Above that, I'm going to make a JavaScript object, which is name set to "name." In this case, because the key and value are the same, I can shorten it to this shorthand where it sets name to "name."

[1:43] What I'm doing here is saying await myfirstKV.PUT with the key user and the value of "user." With the way KV works, instead of doing it this way, we need to actually JSON.stringify() this user so that it's storing a plain string.

[1:59] I'll just say "JSON.stringify()," and pass in user. Now we know that the thing that's getting stored in here is a stringified JSON object with user, where user has name set to "name."

[2:15] Now let's take this const Value=await myfirstKV.get, and let's change this to user. This'll return you a response where value...That looks fine. Instead of Content-Type text plain, let's actually make this application/json, because we know that the data that's going to be returned is JSON.

[2:38] I'll take this and put it in this else block, because I know that any other URL, I want to return this GET request. Let's publish our project again. Back here in our browser, if we refresh, we're going to see no value here because nothing has been set yet on our KV key.

[2:58] What I'll do here is I'll say "set," and then pass in a query parameter of name is Egghead. You'll see an "Error 1101, Worker threw exception." In order to understand why this is happening, let's go back and look at our code.

[3:14] What I've done here is called this await myfirstKV.put user JSON.stringify() user, but I haven't actually returned a response yet. In this case, we are putting myfirstKV.put user, so we know that we're inserting this user data into KV.

[3:31] Turns out that maybe what I want to do is basically copy this code over. Instead of value here, I'm going to return JSON.stringify() user. Since I'm doing this twice here, maybe I'll pull out this and say userJSON. That way, I don't repeat that expensive JSON.stringify() call.

[3:55] We'll publish one more time. This time, I'll come back to my browser. I'll refresh, name is Egghead, and if I come here to my root route, I get name Egghead here again.

Set Complex Key Values in a Cloudflare Workers KV Namespace

Share this video with your friends

Course

Build Data-Driven Applications on the Edge with Workers and Workers KV