Solid Query is failing to recognize signal change in `onMount`

[PeterDraex]

Describe the bug

I'd like to load different query on the server and on the client, to speed up the initial page load.

I've tried doing that by including a isClient signal in the queryKey and setting it in onMount. However, the change in isClient signal is not picked up by Solid Query. With createResource, it seems to be working okay.

Your minimal, reproducible example

https://stackblitz.com/edit/github-pqy8j7-jw28rz?file=src%2Fcomponents%2FPage.tsx

Steps to reproduce

See that while the value of the signal is client, the query was resolved with signal value server:

resource: server signal: client

Expected behavior

After hydration, this is displayed

resource: client signal: client

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Windows, Chrome 123

Tanstack Query adapter

solid-query

TanStack Query version

5.30.3

TypeScript version

No response

Additional context

cc @ardeora

[PeterDraex]

@ardeora After update from 5.30.3 to 5.30.5 I'm getting an error in queries that use enabled:

The value [object Function] of type "function" cannot be parsed/serialized.

https://stackblitz.com/edit/github-pqy8j7-jw28rz?file=package.json,src%2Fcomponents%2FPage.tsx

[ardeora]

@PeterDraex Sorry slight regression. Fix should be up soon https://github.com/TanStack/query/pull/7300

[PeterDraex]

@ardeora Can you make this work with placeholderData: keepPreviousData? Right now, it's triggering Suspense on load. I'd like the server data to be considered previous data.

[ardeora]

@PeterDraex This wont be possible because you're essentially changing the query key before the query is hydrated. So on the client query doesnt know the data of the server rendered query. One workaround is passing the server data as initialData shown here

https://stackblitz.com/edit/github-pqy8j7-bzfkzw?file=package.json,src%2Fcomponents%2FPage.tsx

One other way would be to expose an onHydrated callback on each query where you can provide logic after a query has been hydrated. But that's not planned at the moment! If you would like that please feel free to open a new issue and I'll put it on my backlog!

[PeterDraex]

@ardeora I don't see initialData in the stackblitz. Maybe you forgot to hit save? 😀

[ardeora]

@PeterDraex Oops yes I did 😀 https://stackblitz.com/edit/github-pqy8j7-bzfkzw?file=package.json,src%2Fcomponents%2FPage.tsx

[PeterDraex]

@ardeora I see, I was hoping to see some trick to actually get the data that was loaded on the server, without calling the API manually function again 😆

I feel like callback on full completion of hydration should be implemented on the level of SolidJS APIs, not via Solid Query's callback. I'm surprised that the query is not hydrated yet when onMount is called and isHydrated is true, though I understand that there might be some upstream limitations there. Combination of onMount and setTimeout seems to be working ok, so I'll use that for now:

onMount(() => setTimeout(() => setIsQueryHydrated(true), 0));

Thank you!