Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

`queryOptions` built via currying breaks SolidJS' Reactivity

Đang mở
  • Có gì không ổn?
#10,751 1 bình luận 1 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

  • #10769 của @raashish1601 — đã đóng, không merge
  • #11468 của @ousamabenyounes — đã đóng, không merge

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
55/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu với bản reproduction solid-query-curry-reactivity được liên kết, chuyển sang branch đó, chạy pnpm install và pnpm dev, rồi kiểm tra hành vi RouteComponent được hiển thị. Theo dõi cách kết quả của curried fetchShellData được truyền qua useQuery; được xem là hoàn tất khi query chạy lúc component mount và Switch được render mà không cần truy cập q.data hoặc createMemo().

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
TypeScript
Star
50.4k
Fork
4.2k
Merge trung bình
11 giờ 33 phút
Pull request đã merge (30 ngày)
421

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của TanStack/query

Tất cả issue của TanStack/query

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.