♡ LoV432 Posts - Answer Overflow

♡ LoV432

Explore posts from servers

•Created by ♡ LoV432 on 6/25/2024 in #questions

Prefetching deeply nested loading.tsx doesn't work on NextJS 14

I have been banging my head around this for 3 days but i just don't understand why this is happening. Here's the issue: app/route-1/loading.tsx <--- This is prefetched when you open example.com/ app/route-2/nested/loading.tsx <--- This isn't prefetched when opening example.com/ app/route-3/(nested)/loading.tsx <--- This also isn't prefetched when opening example.com/ I don't understand why this is happening or how i can force all loading.tsx to be prefetched. Here's a sandbox i have created to showcase this: https://codesandbox.io/p/devbox/loading-prefetch-8tc8hz And here's the actual code where i am experiencing this: https://github.com/LoV432/ArchiveScape/blob/master/app/users/(users)/loading.tsx I would really appreciate any and all kind of help 😅

2 replies

SSolidJS

•Created by ♡ LoV432 on 4/18/2024 in #support

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 😅

2 replies

Gaming

Programming