`queryOptions` built via currying breaks SolidJS' Reactivity
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 55/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 活跃
- 技术栈
- typescript
- 领域
- frontend
调研方向
从链接的 solid-query-curry-reactivity 复现开始,切换到该分支,运行 pnpm install 和 pnpm dev,并检查显示的 RouteComponent 行为。跟踪 curried fetchShellData 的结果如何通过 useQuery 传递;当 query 在组件挂载时运行,并且 Switch 的渲染不需要访问 q.data 或 createMemo() 时,即完成。
由索引模型根据 Issue 内容生成。
描述
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
- 主要语言
- TypeScript
- 星标
- 50.3k
- 派生
- 4.2k
- 平均合并
- 22 小时 33 分钟
- 30 天内合并 PR
- 214
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
TanStack/query 的其他 Issue
-
难度 2/5 1-3 小时 新手友好度 84/100
-
难度 2/5 1-3 小时 新手友好度 84/100
-
难度 4/5 3-5 天 新手友好度 45/100
-
难度 4/5 3-5 天 新手友好度 40/100
-
难度 4/5 3-5 天 新手友好度 48/100
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 84/100
bcgov/bc-wallet-mobile#4761 · 1 条评论 ·
-
external-issue to-triage
难度 2/5 1-3 小时 新手友好度 88/100
-
area-deployment area-integrations triage:bot-seen
难度 2/5 半天 新手友好度 86/100
-
难度 2/5 1-3 小时 新手友好度 82/100
-
refactor
难度 2/5 1-3 小时 新手友好度 84/100