`queryOptions` built via currying breaks SolidJS' Reactivity
まだ誰も着手していません。
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 55/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 活発
- 技術スタック
- typescript
- 領域
- frontend
調査の方向性
リンクされている solid-query-curry-reactivity の再現から始め、そのブランチに切り替え、pnpm install と pnpm dev を実行して、表示された RouteComponent の動作を調べます。curried fetchShellData の結果が useQuery を通じてどのように渡されるかを追跡します。コンポーネントのマウント時に query が実行され、q.data へのアクセスや createMemo() を必要とせずに Switch がレンダリングされれば完了です。
索引モデルが 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分
- マージ済み PR(30日)
- 214
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- 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