diff --git a/contributors.yml b/contributors.yml index f0939a8c23d..59a06cd97cc 100644 --- a/contributors.yml +++ b/contributors.yml @@ -381,6 +381,7 @@ - vkrol - vlindhol - vmosyaykin +- vorcigernix - weavdale - wKovacs64 - wladiston diff --git a/docs/guides/data-loading.md b/docs/guides/data-loading.md index d3a650c5d41..d21397a4d54 100644 --- a/docs/guides/data-loading.md +++ b/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 (
-

{} Products

- {/* ... */} +

Product

+ {product.name}
); } ``` + + +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].