`queryOptions` built via currying breaks SolidJS' Reactivity
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 50.3k
- Forks
- 4.2k
- Avg merge
- 18h 25m
- Merged PRs (30d)
- 200
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:
- Switch to
solid-query-curry-reactivitybranch pnpm install&pnpm dev- 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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked solid-query-curry-reactivity reproduction, switch to that branch, run pnpm install and pnpm dev, and inspect the shown RouteComponent behavior. Trace how the curried fetchShellData result is passed through useQuery; done means the query runs on component mount and the Switch renders without requiring q.data access or createMemo().
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100