Update Cloudflare Workers KVs Data from an API Route

Instructor: [0:00] Now that we understand the basics of how to get and put data into a KV namespace, let's build a complete application showing how you can use KV inside of your frontend user interfaces.

[0:10] I'm going to start by clearing out all of the code inside of handleRequest. Then, I'm going to call a single function called GetTodos. This function will take in the request parameter which comes from this event listener, which has all the data about the incoming request from a client. We'll define GetTodos. This is an asynchronous function. Again, it's just taking in the parameter, request.

[0:32] Then, inside of that, I'm going to do two things. First, I'm going to get the data from our KV namespace. To do that, I'm going to make something called a cache key. This is going to be a static string that we'll use to look up the data in our KV namespace. For now, I'll just call this data.

[0:45] I'm going to make a second variable called cache. This is going to be the response from awaiting on the function, getCache, where I pass in the cache key. GetCache is another function that's very simple. Just calls my KV namespace here.

[1:01] As you can see back here in regular Tamil, you remember we set this as my first KV. I'll just say, my first KV.get, passing in the key. With this function set up, we have this function which will get data from KV specifically, this key data and will make it available as this cache variable.

[1:21] The second thing we're going to do is return a new response passing in a body variable and this will be an HTML string that we'll construct in just a second. Though, in order for it to be valid HTML, we don't just need to return the body here.

[1:33] We also need to pass in a second argument with a object representing our headers. Specifically, one header in here called content type, which we'll set to text/HTML. This will tell the browser that the incoming response is an HTML page. Now our body here is going to be an HTML string.

[1:53] To do that, we'll just say const body equals, and then we're going to pass in this function HTML and then pass in JSON.stringify with cache. Cache here is going to be the data from my first KV and HTML is actually a function that we're going to define.

[2:11] This isn't included inside of the workers runtime. This is a custom function that we'll set up ourselves. Up here at the top, let's make a new function called HTML and it's going to be a function that takes in data here and then just returns a string.

[2:26] I'm going to use the backtick format here to make a multi-line string. Then inside of this I'll say, doc type HTML and then the HTML tag. I'll close that out. Then inside of that, one more tag, which is the body tag. I'll just make a little H1 here that says hello world.

[2:46] For more advanced users, you may want to take this in the future and use some sort of templating engine something like Pug or Jade. All of these tools work really well inside of workers.

[2:55] For now, since we just have a plain HTML template, we're just going to use a multi-line string. You'll notice that our HTML function takes in this variable data, which is the data from our KV namespace.

[3:05] In order to actually use it inside of our HTML, we can actually just embed it directly inside of the code using a script tag. I'll make a new script tag here. Then what I'm going to do is assign it to a variable called window.todos.

[3:20] The application we're going to be making is a simple to-do application. I'll start referring to it as to-dos inside of our HTML page so that as we write the client side JavaScript, it makes a little bit more sense.

[3:32] In order to put that in here, I'll just use string interpolation using the dollar sign and curly brace format and just put data directly inside of here.

[3:42] Remember that data here is JSON stringified so it's actually OK to just put it directly like this because it's going to be a string that you can just drop directly without having to wrap it in quotes or do anything fancy there.

[3:54] First, we set up a variable called cache key which I'll just set to data. Then we go and call the getCache function passing in that cache key which gets a corresponding piece of data from the my first KV namespace.

[4:07] Then finally, we set up this body variable which is an HTML string, pass in the to-do data, and then return it as a response back to the client setting the content type to text/HTML.

[4:20] One last thing that you might not be aware of is that of course, if data is coming back from here, this all is going to work. If someone hasn't ever used the KV namespace and they're trying to run this application for the first time, this cache variable here may not work.

[4:33] What we need to do is call instead of cache here, we need to say cache or an empty array because this may be blank and we still want to have something we can stringify and pass to the HTML. Now with that, I'll run Wrangler publish to push the new version of my code up.

[4:51] If I open this in browser, you can see it says hello world. I have HTML coming back. If I take a look at the HTML inside of the Chrome inspector, you can see there's a script tag here with window.todos, which is set to an empty array.

[5:04] As we put data in there, this will get filled out and we'll be able to actually render those to-dos here in the user interface.