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


23 Replies
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 requests2 net
and both are GET requests? one isn't an option request?

GET both


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

xD

hm interesting
It works fine in production, but it seems really strange to me what's happening in dev.
I don't know if tanstack query does something different in dev mode
Well, I was scared. It doesn't seem serious, if it works in production xD
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 ...
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.
interesting maybe they do that for the same reason react does, didn't think about that
When I use re-r-re-re-re-re-re-re-re-re-re-react I always remove it xD
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...
a dev different from production is the source of all evilTry 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.
Just as an aside:
The TanStack example makes liberal use of
Suspense
which is likely preferrable to
and
is likely better served with Show
:
So I imagine something along the lines of:
<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
Controversial xD I think I read it better as I have it.
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.