From 890dafaa8385828fde3d09ae4b12e8011b18477d Mon Sep 17 00:00:00 2001 From: Atila Fassina Date: Tue, 15 Oct 2024 22:31:22 +0200 Subject: [PATCH] fix: replace recommendation in data-loading --- .../building-your-application/data-loading.mdx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/routes/solid-start/building-your-application/data-loading.mdx b/src/routes/solid-start/building-your-application/data-loading.mdx index a0eca587d3..3281d498de 100644 --- a/src/routes/solid-start/building-your-application/data-loading.mdx +++ b/src/routes/solid-start/building-your-application/data-loading.mdx @@ -14,7 +14,7 @@ It takes an async function and returns a [signal](/reference/basic-reactivity/cr
-```tsx {6-9} +```tsx {6-9} title="/src/routes/users.tsx" import { For, createResource } from "solid-js"; type User = { name: string; house: string }; @@ -30,7 +30,7 @@ export default function Page() { ```
-```tsx {4-7} +```tsx {4-7} title="/src/routes/users.jsx" import { For, createResource } from "solid-js"; export default function Page() { @@ -46,11 +46,8 @@ export default function Page() { When fetching inside components, you can encounter unnecessary waterfalls, especially when nested under lazy loaded sections. -To solve this, it can be valuable to introduce a hoist and cache mechanism. - -Using a library like [Tanstack Query](https://tanstack.com/query/latest) can help with this. - -for the example below we will be using the data in APIs in [`solid-router`](/solid-router) +To solve this, it is recommended to hoist the data fetching to the top of the component tree or, when in [SolidStart](/solid-start), use the server to fetch data in a non-blocking way. +For the example below we will be using the data in APIs in [`solid-router`](/solid-router) Using some of the features of `solid-router`, we can create a cache for our data: @@ -78,6 +75,7 @@ export default function Page() { } ```
+
```tsx title="/routes/users.jsx" {4, 7, 10} import { For } from "solid-js";