query icon indicating copy to clipboard operation
query copied to clipboard

[solid-query] Uncaught (in promise) Error: experimental_prefetchInRender feature flag is not enabled

Open BierDav opened this issue 1 year ago • 18 comments

Describe the bug

When using the latest version of tanstack-query you get at least in solidjs for each query this error message in the console:

Uncaught (in promise) Error: experimental_prefetchInRender feature flag is not enabled

Your minimal, reproducible example

https://codesandbox.io/p/github/BierDav/temp-tanstack-query-ssr-bug/experimental-flag-warning

Steps to reproduce

  1. Just start it using bun i && bun dev

Expected behavior

No error message in the console, because the promise wasn't even accessed

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

  • OS: Windows, Linux

Tanstack Query adapter

solid-query

TanStack Query version

v5.59.13

TypeScript version

No response

Additional context

I have looked into the code. It is not really that something went wrong, and more about that the promise which causes this issue is evaluated even though the feature is not set.

Probably the easiest solution is to replace the promise when the flag is not enable with a getter function which then only throws the error, when the promise is really accessed.

BierDav avatar Oct 23 '24 09:10 BierDav

Note: i can’t access your sandbox - it’s likely set to private.

I see no error in the Solid Query Simple example:

https://stackblitz.com/github/tanstack/query/tree/main/examples/solid/simple?embed=1&theme=dark&preset=node&file=src/index.tsx

TkDodo avatar Oct 23 '24 09:10 TkDodo

we see this issue too in our setup. (solid-start, without bun)

@TkDodo the url in example is pasted 2 times. just copy one of the halves. opens fine here

indeyets avatar Oct 23 '24 15:10 indeyets

StackBlitz link for the same repo: https://stackblitz.com/~/github.com/BierDav/temp-tanstack-query-ssr-bug After waiting for the dev server to start, I had to click on "http://localhost:3000/" in the terminal. Then I see JSON in the preview and the error in browser console.

I'm also experiencing the experimental_prefetchInRender feature flag error in my SolidJS project.

PeterDraex avatar Oct 24 '24 08:10 PeterDraex

we see this issue too in our setup. (solid-start, without bun)

@TkDodo the url in example is pasted 2 times. just copy one of the halves. opens fine here

sorry for that i fixed it

BierDav avatar Oct 24 '24 10:10 BierDav

having the same issue, this seems to be happening since 5.59.0

0-don avatar Oct 31 '24 14:10 0-don

Can confirm, rolling back to 5.56.2 does not present this. Even in the docs own example this issue is present https://tanstack.com/query/latest/docs/framework/solid/examples/solid-start-streaming ; to see it happening go to the "mixed" page for example and reload, issue appears in the console

YosefBayoude avatar Nov 02 '24 16:11 YosefBayoude

@YosefBayoude I rolled back to 5.45.0 which doesn't have this issue

PeterDraex avatar Nov 03 '24 03:11 PeterDraex

codesandobx still doesn’t work for me, but stackblitz does: https://stackblitz.com/github/BierDav/temp-tanstack-query-ssr-bug/tree/experimental-flag-warning

@KATT this promise rejection shows up in the solid-js adapter:

https://github.com/TanStack/query/blob/5d69ad773a7a2df632df48eefce6fd9772d26db7/packages/query-core/src/queryObserver.ts#L89-L93

Not sure why it works for react though 🤔

Is there a better place where we can reject the promise - or should we do it at all?

TkDodo avatar Nov 03 '24 09:11 TkDodo

@TkDodo have the same issue in React (

vlad99902 avatar Nov 05 '24 21:11 vlad99902

This is odd, we add a .catch(() => to prevent this:

https://github.com/TanStack/query/blob/06e315c9ff413fb2d91b1f565bf5bfc9437c26ed/packages/query-core/src/thenable.ts#L52-L54

Can this be a Vite-thing or something? 🤔

KATT avatar Nov 06 '24 10:11 KATT

@vlad99902 I haven’t seen this in react so far - can you make a reproduction for that please?

TkDodo avatar Nov 06 '24 11:11 TkDodo

This issue doesn't affect react

BierDav avatar Nov 24 '24 04:11 BierDav

Unfortunately it does, i'm seeing it in react.

This issue doesn't affect react

harrisrobin avatar Dec 02 '24 22:12 harrisrobin

do you have a reproduction?

BierDav avatar Dec 03 '24 08:12 BierDav

any update on this one ?

qlaffont avatar Dec 26 '24 14:12 qlaffont

Are there any downsides to enabling experimental_prefetchInRender flag for affected queries?

UPD: oh, right… some of the server-side renderings just hang forever this way. seems to be related to enabled: with reactive value

indeyets avatar Jan 11 '25 10:01 indeyets

seeing this with @tanstack/solid-query, but that probably uses the core.

dsmurl avatar Jan 24 '25 04:01 dsmurl

Considering how Solid Query works, I assume the issue is that it fetches data as soon as the page loads, and something is not functioning as expected.

In your code, there is nothing preventing the component from rendering, such as a condition with a Show component, and you are not using the enabled key either. As a result, the app makes a call right at startup, which likely isn't working.

This issue is common, especially when the query relies on a specific prop that you assume is always available. You need to inform Solid Query that the query is "enabled" only when that specific prop is true.

I hope this makes sense. Let me know.

ZGFuZHk100 avatar Mar 15 '25 16:03 ZGFuZHk100

Hey folks, I was also able to reproduce this issue running version 5.59.20 on a NextJS app. For me, turning on automatic fetching via enabled:true seems to have solved it - although it certainly required some refactor, I thought it was worth it to ensure we're on a recent-ish version

jcavalca avatar Aug 14 '25 20:08 jcavalca

on a NextJS app.

I thought that this issue is solid-js specific. But it's interesting that it's reproducible to some degree on react 🤔

indeyets avatar Aug 14 '25 20:08 indeyets

I haven’t seen this in react so far - can you make a reproduction for that please?

This still stands - please provide a reproduction in React 🙏

TkDodo avatar Aug 17 '25 08:08 TkDodo

I've caught this bug with React 19 using react-native 0.79+. Such method call triggered this error:

const result = observer.getOptimisticResult(defaultedOptions);

Image

VladyslavMartynov10 avatar Aug 17 '25 13:08 VladyslavMartynov10

I’ve run into this bug with React 19 and Next 15. I set experimental_prefetchInRender: true on the QueryClient initializer. Should I be worried?

denizersin avatar Aug 17 '25 18:08 denizersin

@KATT could we, instead of rejecting the promise outright just initialize with a pending promise and use our property tracking to throw an error when promise is used without the experimental flag?

TkDodo avatar Aug 18 '25 11:08 TkDodo

please try out the preview build of this PR and let me know if that fixes the issue for you:

  • https://github.com/TanStack/query/pull/9576
npm i https://pkg.pr.new/@tanstack/react-query@9576

Thanks 🙏

TkDodo avatar Aug 18 '25 12:08 TkDodo

@TkDodo Seems solved for solid-query at least 👏

jakst avatar Aug 19 '25 09:08 jakst