Skip to content
This repository has been archived by the owner on Jul 5, 2023. It is now read-only.

Commit

Permalink
docs: simplify data loading for cloudflare (remix-run#3760)
Browse files Browse the repository at this point in the history
  • Loading branch information
kentcdodds authored and dvargas92495 committed Jul 22, 2022
1 parent ee08a7d commit d307bb5
Showing 1 changed file with 8 additions and 20 deletions.
28 changes: 8 additions & 20 deletions docs/guides/data-loading.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 ({
Expand All @@ -250,9 +254,7 @@ export const loader: LoaderFunction = async ({
return json(
await context.PRODUCTS_KV.get(
`product-${params.productId}`,
{
type: "json",
}
{ type: "json" }
)
);
};
Expand All @@ -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].
Expand Down

0 comments on commit d307bb5

Please sign in to comment.