Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

`queryOptions` built via currying breaks SolidJS' Reactivity

オープン
#10,751 コメント 1 件 リアクション 1 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
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:

  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

主要言語
TypeScript
スター
50.3k
フォーク
4.2k
平均マージ
22時間 33分
マージ済み PR(30日)
214

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

TanStack/query のほかの issue

TanStack/query の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。