SolidJSS
SolidJS•2y ago•
1 reply
♡ LoV432

SolidStart with TanStack Query causing hydration error

I have an almost barebone SolidStart project that was init using npm init solid@latest and selected tailwindcss and TS during setup

I am trying to fetch some data using TanStack Query but i keep running into hydration error

My index.tsx
import {
  QueryClient,
  QueryClientProvider,
  createQuery,
} from "@tanstack/solid-query";
import { For, Switch, Match } from "solid-js";
import { getUserMessages } from "~/utils/get-messages";

export default function App() {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnMount: false,
        staleTime: Infinity,
      },
    },
  });
  return (
    <QueryClientProvider client={queryClient}>
      <Messages />
    </QueryClientProvider>
  );
}

function Messages() {
  const query = createQuery(() => ({
    queryKey: ["messages"],
    queryFn: getUserMessages,
  }));

  return (
    <div>
      <Switch>
        <Match when={query.isError}>Error</Match>
        <Match when={query.isLoading}>Loading...</Match>
        <Match when={query.isSuccess}>
          <For each={query.data}>
            {(message) => <div>{message.messageText}</div>}
          </For>
        </Match>
      </Switch>
    </div>
  );
}


and my get-messages.tsx file
type Message = {
    userId: number
    messageText: string
}

export function getUserMessages(){
    return [
        {userId: 1, messageText: 'Hello World'}
    ]
}

and the hydration error i get:
Hydration Mismatch. Unable to find DOM nodes for hydration key: 0-0-0-0-0-0-0-0-1-0-0-0-0-0-0-0-0-0-0-0-0-0-3


The hydration error goes away if i add 500ms delay in getUserMessages()
I feel like i am misunderstanding something very fundamental so i would appreciate any kind of pointers 😅
Was this page helpful?