Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Bug: Dependent Query doesn't work with solid-js SSR

Offen
  • Stimmt etwas nicht?
#7,513 8 Kommentare 1 Reaktion 1 zugewiesene Person Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

@ardeora arbeitet bereits daran.

Seit 04.6.2024.

Bewertung

Dieses Issue wurde noch nicht bewertet.

Beschreibung

bug package: solid-query
Describe the bug

In the Tanstack documentation there is a section about dependent queries: https://tanstack.com/query/latest/docs/framework/react/guides/dependent-queries

The example suggest that you should use enable to create dependent queries. The problem when using enable is that when it is disabled it doesn't suspend the current context and therefore doesn't fetch on the server.

Your minimal, reproducible example

https://codesandbox.io/p/github/BierDav/temp-tanstack-query-ssr-bug/master?import=true

Steps to reproduce
  1. Open codesandbox
  2. Run ´pnpm dev`
  3. Open the preview
  4. Now the server waits for 2 seconds before responding because of the timout query in src/routs/index.tsx, but the moment it finishes it doesn't care about the second query getting enabed and returning it immediately to the browser.
  5. This causes that the client has to fetch the remaining state query. You can see that in the dev tools:
    image
Expected behavior

The expected behavior would be that both queries are beeing evaluated before the server sends its initial response. But I don't know if this is even possible with this syntax from a technical perspective.

How often does this bug happen?

Every time

Screenshots or Videos
import { createQuery } from "@tanstack/solid-query";

export default function () {
  const timeout = createQuery(() => ({
    queryKey: ["timeout"],
    queryFn: () =>
      new Promise((resolve) => setTimeout(() => resolve("test"), 2000)),
  }));

  const state = createQuery(() => ({
    queryKey: ["realQuery"],
    queryFn: async () => {
      const resp = await fetch("https://api.sampleapis.com/switch/games");
      console.log("fetched");
      return await resp.json();
    },
    enabled: !!timeout.data,
  }));

  return <>{JSON.stringify(state.data?.[0])}</>;
}
Platform
  • Windows
  • Node v21.7.3
  • Chrome
Tanstack Query adapter

solid-query

TanStack Query version

v5.40.0

TypeScript version

No response

Additional context

No response

Vorherrschende Sprache
TypeScript
Sterne
50.4k
Forks
4.3k
Ø Merge
9 Std. 42 Min.
Gemergte PRs (30 T.)
590

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus TanStack/query

Alle Issues in TanStack/query

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.