SolidJS•3mo ago

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>
  );
}

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'}
    ]
}

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

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 😅

1 Reply

♡ LoV432•3mo ago

Fixed! Turns out it was some npm bug maybe? The correct code was supposed to be

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

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

Instead of

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

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

which is how i was doing it originally but that was just straight up crashing my server, but after running npm update the issue was fixed 😅

Gaming

Programming

SolidStart with TanStack Query causing hydration error