docs(guides/data-loading): add Cloudflare Pages reference to Cloudfla…

…re KV section (#3718)

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>

contributors.yml

@@ -381,6 +381,7 @@
 - vkrol
 - vlindhol
 - vmosyaykin
+- vorcigernix
 - weavdale
 - wKovacs64
 - wladiston

docs/guides/data-loading.md

@@ -229,19 +229,23 @@ 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 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. You'll need to [do some configuration][cloudflare-kv-setup] but then you can access the data from your loaders:
+```
+"dev:wrangler": "cross-env NODE_ENV=development wrangler pages dev ./public --kv PRODUCTS_KV"
+```
 
-```tsx filename=app/routes/products/$productId.tsx
-import type { LoaderFunction } from "@remix-run/node"; // or "@remix-run/cloudflare"
-import { json } from "@remix-run/node"; // or "@remix-run/cloudflare"
+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 { useLoaderData } from "@remix-run/react";
 
 export const loader: LoaderFunction = async ({
-  params,
+  context, params,
 }) => {
   return json(
-    await PRODUCTS_KV.get(`product-${params.productId}`, {
+    await context.PRODUCTS_KV.get(`product-${params.productId}`, {
       type: "json",
     })
   );
@@ -251,13 +255,29 @@ export default function Product() {
   const product = useLoaderData();
   return (
     <div>
-      <p>{} Products</p>
-      {/* ... */}
+      <p>Product</p>
+      {product.name}
     </div>
   );
 }
 ```
 
+
+
+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].