Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

`queryOptions` built via currying breaks SolidJS' Reactivity

Ouverte
  • Quelque chose ne va pas ?
#10,751 1 commentaire 1 réaction 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
55/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
Active
Stack technique
typescript
Domaine
frontend

Piste de recherche

Commencez par la reproduction liée de solid-query-curry-reactivity, basculez sur cette branche, exécutez pnpm install et pnpm dev, puis examinez le comportement affiché de RouteComponent. Suivez la manière dont le résultat de curried fetchShellData est transmis via useQuery ; c’est terminé lorsque la query s’exécute au montage du composant et que Switch se rend sans nécessiter d’accès à q.data ni à createMemo().

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

Describe the bug

To my knowledge, useQuery is designed so that whenever a component gets mounted (whenever a query key has 1 or more dependent), their queryFn is run (assuming no disabled state / dependent queries, etc).

On SolidJS, creating a queryOption via function currying will result in weird reactivity issue and breaks rendering / hydation code (not sure; TypeError: template is not a function at getNextElement (solid-js_web.js?v=018b852a:792:10) at __root.tsx:57:3...).

One simple reproducible behavior is that query wont be run until you call query.data in a component's body or memoize query.isSuccess in a createMemo().

The following is a reproduction case:

import { queryOptions, useQuery } from "@tanstack/solid-query";
import { createFileRoute } from "@tanstack/solid-router";
import { Match, Switch } from "solid-js";

export const Route = createFileRoute("/")({
  component: RouteComponent,
});

export const fetchShellData = (slug: string) =>
  queryOptions({
    queryKey: ["shell-data", slug],
    queryFn: () => {
      return `ok: ${slug}`;
    },
  });

function RouteComponent() {
  const opt = fetchShellData("/");
  const q = useQuery(() => opt);

  return (
    <Switch>
      <Match when={q.isPending}>PENDING</Match>
      <Match when={q.isError}>ERROR</Match>
      <Match when={q.isSuccess}>Success: {q.data}</Match>
    </Switch>
  );
}
Your minimal, reproducible example

https://tangled.org/angelo.fyi/solid-tanplate/tree/solid-query-curry-reactivity

Steps to reproduce

Assuming you've cloned the repo above:

  1. Switch to solid-query-curry-reactivity branch
  2. pnpm install & pnpm dev
  3. Visit http://localhost:3000
Expected behavior

I expect that queries will be run automatically on component mount.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform
  • OS: macOS Tahoe 26.4.1
  • Browser: Arc Browser - 148.0.7778.168 (Official Build) (arm64)
Tanstack Query adapter

solid-query

TanStack Query version

5.100.11

TypeScript version

4.3.0

Additional context

No response

Langage dominant
TypeScript
Étoiles
50.4k
Forks
4.2k
Merge moyen
22 h 57 min
PR mergées (30 j)
255

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de TanStack/query

Toutes les issues de TanStack/query

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.