solid-query 6.0.0-rc.5: useBaseQuery bumps its version signal on observerAdded/observerRemoved, remounting <Show> children in a loop on Solid 2 rc.14+

オープン 初心者向け
  • 何か問題がありますか？
#12,466 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

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

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
78/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
typescript
領域
frontend

調査の方向性

solid-query-v6-pre ブランチの packages/solid-query/src/useBaseQuery.ts から始めて、onCacheEvent を、特に event.type の扱いに注目して調べてください。再現手順に基づき、子コンポーネントが一度だけマウントされることを確認するリグレッションテストを追加してください。オブザーバーのみに関係するイベントが再マウントのループを引き起こさなくなれば完了です。

索引モデルが issue の本文から書いたものです。

説明

Describe the bug

useBaseQuery's onCacheEvent (packages/solid-query/src/useBaseQuery.ts on solid-query-v6-pre) calls setVersion(v => v + 1) for every query-cache event whose queryHash matches, without looking at event.type. observerAdded, observerRemoved, observerOptionsUpdated and observerResultsUpdated do not change the query's state, but each one re-runs the result projection.

On Solid 2 rc.14+ this combines with a core issue (solidjs/solid#4540): a non-keyed <Show> gated on q.data remounts its children on every re-run. A child that calls useQuery with the same key adds an observer on mount → observerAdded → version bump → remount → new observer → … an infinite remount loop.

  • solid-js rc.13 + solid-query 6.0.0-rc.5: 1 mount
  • solid-js rc.20 + solid-query 6.0.0-rc.5: loop (21 mounts before the guard)
  • solid-js next@215c365: loop
Steps to Reproduce

package.json: solid-js, @solidjs/web, @solidjs/signals 2.0.0-rc.20, @tanstack/solid-query 6.0.0-rc.5; dev @solidjs/vite-plugin 3.0.0-next.54, vitest 5.0.5, jsdom 30.1.2.

import { render } from "@solidjs/web";
import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/solid-query";
import { Show } from "solid-js";
import { expect, it } from "vitest";

const wait = (ms: number) => new Promise((r) => setTimeout(r, ms));

it("a second observer mounted under a Show gated on the first one's data mounts once", async () => {
  const client = new QueryClient({ defaultOptions: { queries: { retry: false, staleTime: Number.POSITIVE_INFINITY } } });
  let mounts = 0;
  const options = () => ({ queryKey: ["k"], queryFn: () => wait(10).then(() => 1) });
  function Child() {
    mounts++;
    if (mounts > 20) throw new Error("remount loop");
    useQuery(options);
    return <p>child</p>;
  }
  function Page() {
    const q = useQuery(options);
    return (
      <Show when={q.data !== undefined}>
        <Child />
      </Show>
    );
  }
  const el = document.createElement("div");
  const dispose = render(() => (
    <QueryClientProvider client={client}>
      <Page />
    </QueryClientProvider>
  ), el);
  await wait(100);
  dispose();
  expect(mounts).toBe(1);
});

package.json

{
  "name": "solid-query-repro",
  "private": true,
  "type": "module",
  "scripts": { "test": "vitest run" },
  "dependencies": {
    "solid-js": "2.0.0-rc.20",
    "@solidjs/web": "2.0.0-rc.20",
    "@solidjs/signals": "2.0.0-rc.20",
    "@tanstack/solid-query": "6.0.0-rc.5"
  },
  "devDependencies": {
    "@solidjs/vite-plugin": "3.0.0-next.54",
    "jsdom": "30.1.2",
    "vitest": "5.0.5"
  }
}

vitest.config.ts

import solid from "@solidjs/vite-plugin";
import { defineConfig } from "vitest/config";

export default defineConfig({
  plugins: [solid()],
  test: { environment: "jsdom" },
});
Expected behavior

Child mounts once.

Actual behavior

expected 21 to be 1 (the guard throws "remount loop").

Suggested fix

Bump version only for events that can change the result (added, removed, updated), not for observer* events. The core issue is the root cause; this avoids the trigger and an unnecessary projection re-run per observer mount/unmount.

Related: #11903, #12031 / #12034 (same function, different defects).

主要言語
TypeScript
スター
50.5k
フォーク
4.2k
平均マージ
11時間 2分
マージ済み PR（30日）
524

環境構築

はじめの一歩

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

TanStack/query のほかの issue

TanStack/query の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

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

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