Read and write KV Storage cache from Cloudflare Worker
KV Storage is a read-optimized, eventually consistent cache that can be accessed from Cloudflare Workers. The interface for reading and writing is similar to localStorage in the browser.
In this lesson, we create a read-kv route for reading from the KV store. This automatically gets passed any KV stores that have been bound to the Cloudflare Worker. Initially, the store is empty, so returns the value null.
Additionally, we create a write-kv route to populate the store with test data.
To reduce the overhead of stringifying and parsing JSON objects, we create two helper functions to easily read and write values to any KV store.
Lastly, we publish a production version of our Cloudflare Worker, to confirm that writing these value locally - to our preview store - does not affect our production store.
Code Snippets
readFrom helper function
export const readFrom = async (cache, path) => {
const data = await cache.get(path);
return JSON.parse(data);
};
writeTo helper function
export const writeTo = async (cache, path, data) => {
await cache.put(path, JSON.stringify(data));
};
Read KV route
router.get("/read-kv", async (request, { ARTICLES }) => {
const articles = await readFrom(ARTICLES, "/articles");
return json(articles);
});
Write KV route
router.get("/write-kv", async (request, { ARTICLES }) => {
const articles = [{ title: "test3" }, { title: "test4" }];
await writeTo(ARTICLES, "/articles", articles);
return json(articles);
});
Publish Cloudflare Worker
npx wrangler publish
Run wrangler development server
npx wrangler dev
Resources
Jon Meyers: [0:00] Let's add a new route for reading from our KV store. Similarly to our environment variables, our KV stores also get automatically parsed into each of our routes. The API for reading and writing is very similar to that of local storage in the browser, so if we say ARTICLES.get, we then give it a string path. [0:17] In this case, we could say /articles, and this is asynchronous, so we need to await that promise to resolve, and then we could just return a JSON representation of our articles. Now by navigating to localhost:8787/read-kv, we can see that we get back null because we have not yet written any articles to our KV store.
[0:37] Again, let's create a new route for writing to our KV store. In here, we could create some articles which can be an array of objects, and we'll just have a title set to test1, and another for test2.
[0:51] We can then await ARTICLES.put to write a value to our KV store. We give it a path, so this will be /articles. Then, we need to give it a stringified version of our JSON object. We could return a JSON representation of our article, so we can see what we've written to the store.
[1:11] Now, if we navigate to /write-kv, we'll see the data that we've written to our KV store. Then, if we navigate back to our read-kv route, we'll see that we get back this stringified version of our data, so if we navigate back to our read-kv route and wrap this call to our JSON function with a JSON.parse. If we refresh, we'll see a JSON representation of that data.
[1:37] This stringifying and parsing is something that we're going to have to do anytime we interact with our cache. Let's create a helper utility.
[1:46] In src, create a new folder called utils, and in there, a file called cache.js. Then, we want to populate this with two functions. One is a readFrom function, which allows us to parse in a KV store, and also the path that we want to read from. We'll then get that data from the KV store and return a JSON representation of it.
[2:09] The opposite of that action, if we wanted to write to our KV store, we parse in our KV cache, the path that we would like to write to, and then also our data. We then write that to the cache at that particular path and stringify that JSON object.
[2:22] We can now import these helper functions in our worker by saying, inport { readFrom, writeTo } from "./utils/cache". If we want to get back all of our articles, we can await readFrom parsing in the KV store we would like to read from and also the path. We no longer need to parse these results as we parse them to the JSON function.
[2:45] Let's make sure that's still working in the browser. We went to read-kv and we're getting back that same JSON object. In our write-kv route, let's change this to test3 and test4, and we can await a call to writeTo, again parsing in our KV store, our path and the JSON version of the data we want to write.
[3:07] We can now get rid of this one, save our file, and go and test it at work. Let's navigate to our write-kv route, and we'll see test test3 and test4. Let's check that those are actually in our KV store, and we get those same values. We can confirm that these values are not in our production cache by quitting our development server and running npx wrangler publish.
[3:26] We can then copy this live published URL and paste it in the browser and append to the path /read-kv and we'll see that we get back null as we have not yet written any values to our production KV store.