From 30792fca5fc03d6ce7debf62b6fbad1b6b2587be Mon Sep 17 00:00:00 2001
From: "Kent C. Dodds" <me+github@kentcdodds.com>
Date: Mon, 18 Jul 2022 09:30:33 -0600
Subject: [PATCH] docs: simplify data loading for cloudflare (#3760)

---
 docs/guides/data-loading.md | 28 ++++++++--------------------
 1 file changed, 8 insertions(+), 20 deletions(-)

diff --git a/docs/guides/data-loading.md b/docs/guides/data-loading.md
index 75a62a8c01e..5e3086b525b 100644
--- a/docs/guides/data-loading.md
+++ b/docs/guides/data-loading.md
@@ -230,17 +230,21 @@ export default function Product() {
 
 ## Cloudflare KV
 
-If you picked Cloudflare Pages as your environment, [Cloudflare Key Value][cloudflare-kv] storage allows you to persist data at the edge as if it were a static resource. To start with local development, you need to add a `--kv` parameter with a name of your namespace to the package.json task, so it would look like this:
+If you picked Cloudflare Pages or Workers as your environment, [Cloudflare Key Value][cloudflare-kv] storage allows you to persist data at the edge as if it were a static resource.
+
+For Pages, to start with local development, you need to add a `--kv` parameter with a name of your namespace to the package.json task, so it would look like this:
 
 ```
 "dev:wrangler": "cross-env NODE_ENV=development wrangler pages dev ./public --kv PRODUCTS_KV"
 ```
 
+For the Cloudflare Workers environment you'll need to [do some other configuration][cloudflare-kv-setup].
+
 This enables you to use the `PRODUCTS_KV` in a loader context (KV stores are added to loader context automatically by the Cloudflare Pages adapter):
 
 ```tsx
-import type { LoaderFunction } from "@remix-run/cloudflare"; // or "@remix-run/node"
-import { json } from "@remix-run/cloudflare"; // or "@remix-run/node"
+import type { LoaderFunction } from "@remix-run/cloudflare";
+import { json } from "@remix-run/cloudflare";
 import { useLoaderData } from "@remix-run/react";
 
 export const loader: LoaderFunction = async ({
@@ -250,9 +254,7 @@ export const loader: LoaderFunction = async ({
   return json(
     await context.PRODUCTS_KV.get(
       `product-${params.productId}`,
-      {
-        type: "json",
-      }
+      { type: "json" }
     )
   );
 };
@@ -268,20 +270,6 @@ export default function Product() {
 }
 ```
 
-For Cloudflare Workers environment you'll need to [do some configuration][cloudflare-kv-setup] but then you can access the data from your loaders. You also don't use context to access namespace, so the loader function would look like this:
-
-```tsx filename=app/routes/products/$productId.tsx
-export const loader: LoaderFunction = async ({
-  params,
-}) => {
-  return json(
-    await PRODUCTS_KV.get(`product-${params.productId}`, {
-      type: "json",
-    })
-  );
-};
-```
-
 ## Not Found
 
 While loading data it's common for a record to be "not found". As soon as you know you can't render the component as expected, `throw` a response and Remix will stop executing code in the current loader and switch over to the nearest [catch boundary][catch-boundary].