Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(guides/data-loading): add Cloudflare Pages reference to Cloudflare KV section #3718

Merged
merged 8 commits into from
Jul 14, 2022
Merged

docs(guides/data-loading): add Cloudflare Pages reference to Cloudflare KV section #3718

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
33c2062
Adding Cloudflare Pages
vorcigernix Jul 13, 2022
e698d69
Update contributors.yml
vorcigernix Jul 13, 2022
369c37c
Update docs/guides/data-loading.md
vorcigernix Jul 14, 2022
67b3d13
Update docs/guides/data-loading.md
vorcigernix Jul 14, 2022
3a27c71
Update docs/guides/data-loading.md
vorcigernix Jul 14, 2022
9b2a659
Update data-loading.md
vorcigernix Jul 14, 2022
50b6021
Update docs/guides/data-loading.md
vorcigernix Jul 14, 2022
67ec4a3
Update docs/guides/data-loading.md
kentcdodds Jul 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions contributors.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -379,6 +379,7 @@
- vkrol
- vlindhol
- vmosyaykin
- vorcigernix
- weavdale
- wKovacs64
- wladiston
Expand Down
36 changes: 28 additions & 8 deletions docs/guides/data-loading.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 enable you to use the `PRODUCTS_KV` in a loader context:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you show how you get PRODUCTS_KV into the loader context?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The context is initiated on line 245 and it is used on line 248. Pages for some reason require this, while Workers does not.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's probably better to just generalize this into something about "getLoadContext" is the place where you can pass CF env things through to your action / loader context so it can be applicable to Workers / Pages.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point. Do we do the same thing with context for workers? You can get things off of context in that environment as well?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, fixing this behavior to have the same code for both platforms would be great. I consider the Pages code easier to understand though, context explains where the namespace comes from.

kentcdodds marked this conversation as resolved.
Show resolved Hide resolved
```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",
})
);
Expand All @@ -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].
Expand Down