tanStackQuery/Solid/Astro

Greetings! I don't understand why it's generating two fetches when I render this component. Any ideas? It's supposed to do just 1 fetch, not 2 T.T
No description
No description
23 Replies
Jasmin
Jasminβ€’2w ago
hm where do you have a query with the key tags? seems to be a different one. It's also inactive, maybe it's from the previous page? ah you mean two network requests
edard3v πŸ¦€
edard3v πŸ¦€OPβ€’2w ago
2 net
Jasmin
Jasminβ€’2w ago
and both are GET requests? one isn't an option request?
edard3v πŸ¦€
edard3v πŸ¦€OPβ€’2w ago
No description
edard3v πŸ¦€
edard3v πŸ¦€OPβ€’2w ago
GET both
edard3v πŸ¦€
edard3v πŸ¦€OPβ€’2w ago
No description
edard3v πŸ¦€
edard3v πŸ¦€OPβ€’2w ago
No description
edard3v πŸ¦€
edard3v πŸ¦€OPβ€’2w ago
I don't understand what could be happening. I don't know if it has anything to do with the tanStack configuration with localStorage. I changed from session Storage to localStorage and it seems to do only 1 fetch when reloading the page, but if I navigate it does 2. I don't understand Well, I made a build and in build it only does 1 fetch xD... Now I don't know if it's Astro or Solid hahaha or TanStack... crazy @Jasmin
edard3v πŸ¦€
edard3v πŸ¦€OPβ€’2w ago
No description
edard3v πŸ¦€
edard3v πŸ¦€OPβ€’2w ago
xD
No description
Jasmin
Jasminβ€’2w ago
hm interesting
edard3v πŸ¦€
edard3v πŸ¦€OPβ€’2w ago
It works fine in production, but it seems really strange to me what's happening in dev.
Jasmin
Jasminβ€’2w ago
I don't know if tanstack query does something different in dev mode
edard3v πŸ¦€
edard3v πŸ¦€OPβ€’2w ago
Well, I was scared. It doesn't seem serious, if it works in production xD
zulu
zuluβ€’2w ago
a dev different from production is the source of all evil https://github.com/solidjs/solid/issues/2454 the original issue, is not the same as yours but it looks like the double fetching is a repeating pattern in solid see this comment https://github.com/solidjs/solid/issues/2454#issuecomment-2744431865
GitHub
Delegated events in a Suspense cause resources to refetch on mount ...
Describe the bug When an element with a delegated event handler is present in a Suspense context, firing these events before mount causes all resources to be reran on mount Your Example Website or ...
edard3v πŸ¦€
edard3v πŸ¦€OPβ€’2w ago
I've never understood why they do it. It's like React's strict mode, I don't see the point xD, but hey, who am I? The same old thing.
zulu
zuluβ€’2w ago
interesting maybe they do that for the same reason react does, didn't think about that
edard3v πŸ¦€
edard3v πŸ¦€OPβ€’2w ago
When I use re-r-re-re-re-re-re-re-re-re-re-react I always remove it xD
peerreynders
peerreyndersβ€’2w ago
It's like React's strict mode, I don't see the point xD.
It literally was introduced to stop people fetching in useEffect. https://github.com/facebook/react/issues/24502#issuecomment-1118867879 Ryan Florence went on at length about it at Reactathon 2022 β€œWhen to fetch”. Using React Query was actually one of the proposed solutions.
Real World React
YouTube
When To Fetch: Remixing React Router - Ryan Florence
Recorded live at Reactathon 2022. Learn more at https://reactathon.com When To Fetch: Remixing React Router We've learned that fetching in components is the quickest way to the worst UX. But it's not just the UX that suffers, the developer experience of fetching in components creates a lot of incidental complexity too: data fetching, data muta...
GitHub
Bug: useEffect runs twice on component mount (StrictMode, NODE_ENV=...
React version: 18.0.x, 18.1.x, 18.2.x Steps To Reproduce Visit provided sandbox Open console and observe logs displayed twice. Click the button and observe the rendering log happens twice, the effe...
peerreynders
peerreyndersβ€’2w ago
a dev different from production is the source of all evil
Try to explain to everyone that their desire for DX is the source of all evil; HMR doesn't contribute anything to production but is the greatest reason that dev and production are different.
peerreynders
peerreyndersβ€’2w ago
Just as an aside: The TanStack example makes liberal use of Suspense which is likely preferrable to
{ query.isLoading && <Loading class="absolute_center" /> }
{ query.isLoading && <Loading class="absolute_center" /> }
and
{ query.isError && <ErrIcon class="absolute_center" /> }
{ query.isError && <ErrIcon class="absolute_center" /> }
is likely better served with Show: So I imagine something along the lines of:
<article class={css.cards}>
<Suspense fallback={<Loading class="absolute_center" />}>
<Show
when={!query.isError && query.data}
fallback={<ErrIcon class="absolute_center" />}
>
{(data) => <div>{data().id}</div>}
</Show>
</Suspense>
</article>
<article class={css.cards}>
<Suspense fallback={<Loading class="absolute_center" />}>
<Show
when={!query.isError && query.data}
fallback={<ErrIcon class="absolute_center" />}
>
{(data) => <div>{data().id}</div>}
</Show>
</Suspense>
</article>
<Suspense> - SolidDocs
Documentation for SolidJS, the signals-powered UI framework
GitHub
query/examples/solid/astro/src/components/SolidApp.tsx at fb1dffca7...
πŸ€– Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. - TanStack/query
edard3v πŸ¦€
edard3v πŸ¦€OPβ€’2w ago
Controversial xD I think I read it better as I have it.
ryansolid
ryansolidβ€’2w ago
I haven't had a chance to look at that one yet but I wouldn't say this is something I've commonly(ever?) seen in the past 5 years we've been doing SSR. Just clarify I imagine this behavior is not expected.

Did you find this page helpful?