diff --git a/packages/vike-react-apollo/README.md b/packages/vike-react-apollo/README.md index 82f5f9a9..d4119b4a 100644 --- a/packages/vike-react-apollo/README.md +++ b/packages/vike-react-apollo/README.md @@ -14,6 +14,7 @@ Enables your React components to fetch data using [Apollo GraphQL](https://www.a [Basic usage](#basic-usage) [`withFallback()`](#withfallback) [`` tags](#head-tags) +[Error Handling](#error-handling) [How it works](#how-it-works) [See also](#see-also) @@ -231,6 +232,28 @@ function Movies() {
+## Error Handling + +From a UI perspective, the classic approach to handling errors is the following. +- **Show a 404 page**, for example `

404 Page Not Found

This page could not found.

`. +- **Show an error page**, for example `

500 Internal Server Error

Something went wrong.

`. +- **Redirect the user**, for example redirecting the user to `/publish-movie` upon `/movie/some-fake-movie-title` because there isn't any movie `some-fake-movie-title`. + +But because `vike-react-apollo` leverages [HTML streaming](https://vike.dev/streaming) these approaches don't work (well) and we recommend the following instead. +- **Show a not-found component**, for example `

No movie some-fake-movie-title found.

`. +- **Show an error component**, for example `

Something went wrong (couldn't fetch movie), please try again later.

`. +- **Show a link** (instead of redirecting the user), for example `

No movie some-fake-movie-title found. You can publish a new movie.

`. + +See: [`withFallback()`](#withfallback) + +> [!NOTE] +> HTML chunks that are already streamed to the user cannot be reverted and that's why page-level redirection ([`throw redirect`](https://vike.dev/redirect)) and rewrite ([`throw render()`](https://vike.dev/render)) don't work (well). +> +> Also it isn't idiomatic: the whole idea of collocating data-fetching with the UI component is to think in terms of the component in isolation rather than in terms of the page. + +
+ + ## How it works Upon SSR, the component is rendered to HTML and its data loaded on the server-side. On the client side, the component is merely [hydrated](https://vike.dev/hydration). diff --git a/packages/vike-react-query/README.md b/packages/vike-react-query/README.md index ade3c188..f2cff4f0 100644 --- a/packages/vike-react-query/README.md +++ b/packages/vike-react-query/README.md @@ -18,6 +18,7 @@ Enables your React components to fetch data using [TanStack Query](https://tanst [Basic usage](#basic-usage) [`withFallback()`](#withfallback) [`` tags](#head-tags) +[Error Handling](#error-handling) [Settings](#settings) [Usage with Telefunc](#usage-with-telefunc) [How it works](#how-it-works) @@ -212,6 +213,28 @@ function Movies() {
+## Error Handling + +From a UI perspective, the classic approach to handling errors is the following. +- **Show a 404 page**, for example `

404 Page Not Found

This page could not found.

`. +- **Show an error page**, for example `

500 Internal Server Error

Something went wrong.

`. +- **Redirect the user**, for example redirecting the user to `/publish-movie` upon `/movie/some-fake-movie-title` because there isn't any movie `some-fake-movie-title`. + +But because `vike-react-query` leverages [HTML streaming](https://vike.dev/streaming) these approaches don't work (well) and we recommend the following instead. +- **Show a not-found component**, for example `

No movie some-fake-movie-title found.

`. +- **Show an error component**, for example `

Something went wrong (couldn't fetch movie), please try again later.

`. +- **Show a link** (instead of redirecting the user), for example `

No movie some-fake-movie-title found. You can publish a new movie.

`. + +See: [`withFallback()`](#withfallback) + +> [!NOTE] +> HTML chunks that are already streamed to the user cannot be reverted and that's why page-level redirection ([`throw redirect`](https://vike.dev/redirect)) and rewrite ([`throw render()`](https://vike.dev/render)) don't work (well). +> +> Also it isn't idiomatic: the whole idea of collocating data-fetching with the UI component is to think in terms of the component in isolation rather than in terms of the page. + +
+ + ## Settings You can modify the defaults defined by [`QueryClient`](https://tanstack.com/query/latest/docs/reference/QueryClient).