From 7e5e85be612ce48950d192365b357004d3dd20ec Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Fri, 29 Mar 2024 16:14:31 -0400 Subject: [PATCH] Docs updates --- docs/guides/single-fetch.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/guides/single-fetch.md b/docs/guides/single-fetch.md index 3fcfbfe9d4d..fd982274473 100644 --- a/docs/guides/single-fetch.md +++ b/docs/guides/single-fetch.md @@ -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 @@ -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()` 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()` 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() { @@ -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 >; // ^? { 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() { - return useLoaderData() as Awaited>; + return useLoaderData() as unknown as Awaited< + ReturnType + >; } ``` @@ -91,8 +93,6 @@ 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. @@ -100,7 +100,7 @@ Instead, your `loader`/`action` functions now receive a mutable `response` param ```ts type ResponseStub = { - status: numbers | undefined; + status: number | undefined; headers: Headers; }; ``` @@ -108,9 +108,9 @@ type ResponseStub = { - 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 }) {