SolidJS•2mo ago

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

Jasmin•2mo 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 🦀OP•2mo ago

2 net

Jasmin•2mo ago

and both are GET requests? one isn't an option request?

edard3v 🦀OP•2mo ago

GET both

edard3v 🦀OP•2mo 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 🦀OP•2mo ago

Jasmin•2mo ago

hm interesting

edard3v 🦀OP•2mo ago

It works fine in production, but it seems really strange to me what's happening in dev.

Jasmin•2mo ago

I don't know if tanstack query does something different in dev mode

edard3v 🦀OP•2mo ago

Well, I was scared. It doesn't seem serious, if it works in production xD

zulu•2mo 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 🦀OP•2mo 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•2mo ago

interesting maybe they do that for the same reason react does, didn't think about that

edard3v 🦀OP•2mo ago

When I use re-r-re-re-re-re-re-re-re-re-re-react I always remove it xD

peerreynders•2mo 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•2mo 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•2mo 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 🦀OP•2mo ago

Controversial xD I think I read it better as I have it.

ryansolid•2mo 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.

Gaming

Programming

tanStackQuery/Solid/Astro

Did you find this page helpful?