Skip to content

Commit

Permalink
Docs updates
Browse files Browse the repository at this point in the history
  • Loading branch information
brophdawg11 committed Mar 29, 2024
1 parent acbb967 commit 7e5e85b
Showing 1 changed file with 11 additions and 11 deletions.
22 changes: 11 additions & 11 deletions docs/guides/single-fetch.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ When you enable Single Fetch, Remix will make a single HTTP call to your server
- Single fetch uses a new streaming format under the hood via [`turbo-stream`][turbo-stream], which means that we can stream down more complex data than just JSON
- Naked objects returned from `loader` and `action` functions are no longer automatically converted into a JSON `Response` and are serialized as-is over the wire
- Revalidation after an `action` `4xx`/`5xx` `Response` is now opt-in, versus opt-out
- The `headers` function is no longer used when Single Fetch is enabled, in favor of the new `response` stub passed to your `loader`/`action` functions
- The [`headers`][headers] function is no longer used when Single Fetch is enabled, in favor of the new `response` stub passed to your `loader`/`action` functions

## Details

Expand Down Expand Up @@ -51,7 +51,7 @@ You can control this by exporting a `streamTimeout` numeric value from your `ent

### Type Inference

The current generics support type inference but have a built-in assumption of a JSON-serialized response. With the new streaming format, this assumption no longer holds so `useLoaderData<typeof loader>()` will _not_ return the proper types because it would assume that a `Date` would be a string on the client 😕. Unfortunately, we can't make these types aware of a runtime future flag and we do not want to introduce another hook just for this. Thankfully, the manual typing is also much simpler without needing to think about JSON serialization, so the current recommendation is to skip the generics when opting into single fetch and manually cast the type yourself:
The current generics support type inference but have a built-in assumption of a JSON-serialized response. With the new streaming format, this assumption no longer holds so `useLoaderData<typeof loader>()` will _not_ return the proper types because it would assume that a `Date` would be a string on the client 😕. Unfortunately, we can't make these types aware of a runtime future flag and we do not want to introduce another hook just for this. Thankfully, the manual typing is much simpler without needing to think about JSON serialization, so the current recommendation is to skip the generics when opting into single fetch and manually cast the type yourself:

```ts
export async function loader() {
Expand All @@ -68,18 +68,20 @@ export default function Component() {
// ^? { message: string, date: string }

// ✅ After
const data = useLoaderData() as Awaited<
const data = useLoaderData() as unknown as Awaited<
ReturnType<typeof loader>
>;
// ^? { message: string, date: Date }
}
```

In the next version of Remix, we may re-introduce this generic, but because it's so simple in the meantime you could wrap this up into your own utility:
In the next version of Remix, we may re-introduce this generic, but in the meantime you could wrap this up into your own utility:

```ts
function useTypedLoaderData<T>() {
return useLoaderData() as Awaited<ReturnType<T>>;
return useLoaderData() as unknown as Awaited<
ReturnType<T>
>;
}
```

Expand All @@ -91,26 +93,24 @@ With Single Fetch, if an `action` returns or throws a `Response` with a `4xx/5xx

Revalidation is handled via a `?_routes` query string parameter on the single fetch HTTP call which limits the loaders being called. This means that when you are doing fine-grained revalidation, you will have cache enumerations based on the routes being requested - but all of the information is in the URL so you should not need any special CDN configurations (as opposed to if this was done via a custom header that required your CDN to respect the `Vary` header).

This "functionality" is handled via the `future.unstable_skipActionErrorRevalidation` flag in React Router, which is always set to true when Single Fetch is enabled.

### Headers

The [`headers`][headers] function is no longer used when Single Fetch is enabled.
Instead, your `loader`/`action` functions now receive a mutable `response` parameter unique to that execution:

```ts
type ResponseStub = {
status: numbers | undefined;
status: number | undefined;
headers: Headers;
};
```

- To alter the status of your HTTP Response, set the `status` field directly:
- `response.status = 201`
- To set the headers on your HTTP Response, use the standard [`Headers`][mdn-headers] APIs:
- `response.headers.set`
- `response.headers.append`
- `response.headers.delete`
- `response.headers.set(name, value)`
- `response.headers.append(name, value)`
- `response.headers.delete(name)`

```ts
export async function action({ request, response }) {
Expand Down

0 comments on commit 7e5e85b

Please sign in to comment.