Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add ability to warn when suspense queries aren't prefetched #8309

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

juliusmarminge
Copy link
Contributor

@juliusmarminge juliusmarminge commented Nov 19, 2024

When using the promise-rsc-hydration thingy we aim to prefetch all queries in the RSCs and just consume the streamed promises in our components.

This can be a bit fragile since forgetting to prefetch may not be obvious to find. This PR adds a new option that, when enabled, will log at warning level when useSuspenseQuery is called on a new query that's not already observed.

as with all options, this can be set globally when constructing the QueryClient and overridden locally cause you may have queries

Questions

  • naming? idk, just went with the first thing that came to mind. as a matter of fact it's not even bound to being on the server as you may wanna use this with a usePrefetchQuery -> useSuspenseQuery pattern in a SPA as well
  • given @TkDodo's recent talk, this should probably also accept a callback that gets the query(?) and not just a static boolean flag
  • warning log might be too specific, would it be better for this to be a function and allow the developer to control what should happen? Perhaps they want to log more/less info about the query to help track down the query that's missing a prefetch

Copy link

nx-cloud bot commented Nov 19, 2024

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 0e5b86c. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution


🟥 Failed Commands
nx affected --targets=test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build --parallel=3
✅ Successfully ran 1 target

Sent with 💌 from NxCloud.

Copy link

pkg-pr-new bot commented Nov 19, 2024

Open in Stackblitz

More templates

@tanstack/angular-query-devtools-experimental

pnpm add https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@8309

@tanstack/angular-query-experimental

pnpm add https://pkg.pr.new/@tanstack/angular-query-experimental@8309

@tanstack/query-async-storage-persister

pnpm add https://pkg.pr.new/@tanstack/query-async-storage-persister@8309

@tanstack/eslint-plugin-query

pnpm add https://pkg.pr.new/@tanstack/eslint-plugin-query@8309

@tanstack/query-broadcast-client-experimental

pnpm add https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@8309

@tanstack/query-core

pnpm add https://pkg.pr.new/@tanstack/query-core@8309

@tanstack/query-devtools

pnpm add https://pkg.pr.new/@tanstack/query-devtools@8309

@tanstack/query-persist-client-core

pnpm add https://pkg.pr.new/@tanstack/query-persist-client-core@8309

@tanstack/query-sync-storage-persister

pnpm add https://pkg.pr.new/@tanstack/query-sync-storage-persister@8309

@tanstack/react-query

pnpm add https://pkg.pr.new/@tanstack/react-query@8309

@tanstack/react-query-devtools

pnpm add https://pkg.pr.new/@tanstack/react-query-devtools@8309

@tanstack/react-query-next-experimental

pnpm add https://pkg.pr.new/@tanstack/react-query-next-experimental@8309

@tanstack/react-query-persist-client

pnpm add https://pkg.pr.new/@tanstack/react-query-persist-client@8309

@tanstack/solid-query

pnpm add https://pkg.pr.new/@tanstack/solid-query@8309

@tanstack/solid-query-devtools

pnpm add https://pkg.pr.new/@tanstack/solid-query-devtools@8309

@tanstack/solid-query-persist-client

pnpm add https://pkg.pr.new/@tanstack/solid-query-persist-client@8309

@tanstack/svelte-query

pnpm add https://pkg.pr.new/@tanstack/svelte-query@8309

@tanstack/svelte-query-devtools

pnpm add https://pkg.pr.new/@tanstack/svelte-query-devtools@8309

@tanstack/svelte-query-persist-client

pnpm add https://pkg.pr.new/@tanstack/svelte-query-persist-client@8309

@tanstack/vue-query

pnpm add https://pkg.pr.new/@tanstack/vue-query@8309

@tanstack/vue-query-devtools

pnpm add https://pkg.pr.new/@tanstack/vue-query-devtools@8309

commit: 0e5b86c

Copy link

codecov bot commented Nov 19, 2024

Codecov Report

Attention: Patch coverage is 50.00000% with 1 line in your changes missing coverage. Please review.

Project coverage is 62.67%. Comparing base (4a2e838) to head (8143f1d).
Report is 6 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff             @@
##             main    #8309       +/-   ##
===========================================
+ Coverage   45.96%   62.67%   +16.71%     
===========================================
  Files         199      135       -64     
  Lines        7501     4799     -2702     
  Branches     1717     1348      -369     
===========================================
- Hits         3448     3008      -440     
+ Misses       3676     1549     -2127     
+ Partials      377      242      -135     
Components Coverage Δ
@tanstack/angular-query-devtools-experimental ∅ <ø> (∅)
@tanstack/angular-query-experimental 88.21% <100.00%> (-0.05%) ⬇️
@tanstack/eslint-plugin-query ∅ <ø> (∅)
@tanstack/query-async-storage-persister 43.85% <100.00%> (ø)
@tanstack/query-broadcast-client-experimental ∅ <ø> (∅)
@tanstack/query-codemods ∅ <ø> (∅)
@tanstack/query-core 93.69% <100.00%> (-0.01%) ⬇️
@tanstack/query-devtools 4.78% <ø> (ø)
@tanstack/query-persist-client-core 57.73% <ø> (ø)
@tanstack/query-sync-storage-persister 84.61% <0.00%> (+2.11%) ⬆️
@tanstack/react-query 95.23% <50.00%> (-0.31%) ⬇️
@tanstack/react-query-devtools 10.00% <ø> (ø)
@tanstack/react-query-next-experimental ∅ <ø> (∅)
@tanstack/react-query-persist-client 100.00% <ø> (ø)
@tanstack/solid-query 78.20% <ø> (ø)
@tanstack/solid-query-devtools ∅ <ø> (∅)
@tanstack/solid-query-persist-client 100.00% <ø> (ø)
@tanstack/svelte-query 87.33% <0.00%> (ø)
@tanstack/svelte-query-devtools ∅ <ø> (∅)
@tanstack/svelte-query-persist-client 100.00% <ø> (ø)
@tanstack/vue-query 71.45% <ø> (ø)
@tanstack/vue-query-devtools ∅ <ø> (∅)
---- 🚨 Try these New Features:

* Use this if you intend to only consume prefetched queries.
* Defaults to `false`.
*/
warnOnServerFetches?: boolean
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

bike shedding: discussed with co-workers, something like strictPrefetch/strictPrefetches? Happy with whatever the consensus is

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could also consider different levels, so for example strict might lead to a runtime exception when compared to passing a warn value to simply log it 🤔

  • given @TkDodo's recent talk, this should probably also accept a callback that gets the query(?) and not just a static boolean flag
  • warning log might be too specific, would it be better for this to be a function and allow the developer to control what should happen? Perhaps they want to log more/less info about the query to help track down the query that's missing a prefetch

I do like the callback approach more though, we could add an option called onPrefetchMiss or something along those lines.
This would give us more control over the outcome, e.g. could add observability, warning, throw an exception, etc.

Copy link
Contributor Author

@juliusmarminge juliusmarminge Nov 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do like the callback approach more though, we could add an option called
onPrefetchMiss or something along those lines.
This would give us more control over the outcome, e.g. could add observability, > warning, throw an exception, etc.

yea definetely see this useful for much more than just warning for un-prefetched queries. would love @TkDodo's thoughts on what API he prefers

@TkDodo
Copy link
Collaborator

TkDodo commented Nov 20, 2024

I had as similar idea recently, but wanted to actually create some kind of StrictMode component that would only do this in dev-mode, but there, trigger a hard failure. Please have a look at the RFC:

@juliusmarminge
Copy link
Contributor Author

Yea that's a much more thought out idea compared to this PR which I put together in 5 minutes after a meeting :)

@TkDodo
Copy link
Collaborator

TkDodo commented Nov 22, 2024

Yea that's a much more thought out idea compared to this PR which I put together in 5 minutes after a meeting :)

😂 . Would you like to give implementing the first part of it a try? Specifically, the under-prefetching part, as it overlaps with what you were trying to do here:

Whenever useSuspenseQuery would suspend the component with a new promise, it would log an error. This will alert developers that they are using a suspense query, but haven’t prefetched it. When the component renders, it should merely pick up a promise that is already in the cache. This would address the under-prefetching issue.

Bonus points if it would also work with the use(promise) experimental feature 😁

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants