Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

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

Aberta
  • Algo errado?
#7,513 8 comentários 1 reação 1 responsável Ver no GitHub

Mantenedores costumam responder em até 1 dia

@ardeora já está trabalhando nisso.

Desde 4/6/2024.

Avaliação

Esta issue ainda não foi avaliada.

Descrição

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

Linguagem predominante
TypeScript
Estrelas
50.5k
Forks
4.2k
Merge médio
7h 46min
PRs com merge (30d)
622

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de TanStack/query

Todas as issues de TanStack/query

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.