[Bug?]: Hydration mismatch when using <Switch> <Match> tags

[YosefBayoude]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

Getting hydration mismatch errors

Expected behavior 🤔

The component should render

Steps to reproduce 🕹

Steps:

1. Install Tanstack query
2. Call fetch() with Tanstack query (regular async functions do not seem to cause this issue)
3. Use a <Switch> <Match> </Match> </Switch>
4. Reload the page and watch the error happen

Another way I did this, was to take the existing example from Tanstack query, and simply add a <Switch> <Match> </Match> </Switch>, can be found in the 'Mixed' page here : https://stackblitz.com/edit/tanstack-query-regvcz?file=src%2Fcomponents%2Fuser-info.tsx This issue only seems to happen on the first fetch() call.

Context 🔦

As mentioned by https://github.com/solidjs/solid-start/issues/1174#issuecomment-2025063617, I'm opening a new issue here, since the previous one was crowded. Another point of note, I don't know if this is an issue related to Tanstack query, or with Solid Start, but since the error shows hydration issues, specifically with the use of <Switch> <Match> </Match> </Switch>, I thought I would put it here. Let me know if this needs to go Tanstack instead.

Your environment 🌎

OS: MacOS Sonoma
solid-start: 1.0.10

[ryoid]

I believe this is the same issue as this.

The recommendation is to instead use Suspense and ErrorBoundary

<Suspense fallback={<p>Loading...</p>}>
  <ErrorBoundary fallback={<p>Error: {query.error?.message}</p>}>
    <div>id: {user.id}</div>
    <div>name: {user.name}</div>
    <div>queryTime: {user.queryTime}</div>
    <button
      onClick={() => {
        query.refetch();
      }}
    >
      refetch
    </button>
  </ErrorBoundary>
</Suspense>