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

invoking suspense() with enabled: false will wait infinite while ssr #7609

Closed
n0099 opened this issue Jun 21, 2024 · 3 comments
Closed

invoking suspense() with enabled: false will wait infinite while ssr #7609

n0099 opened this issue Jun 21, 2024 · 3 comments

Comments

@n0099
Copy link

n0099 commented Jun 21, 2024

Describe the bug

const enabled = ref(false);
const { data, suspense } = useInfiniteQuery({ enabled })
await suspense()

Your minimal, reproducible example

https://codesandbox.io/p/devbox/eloquent-frog-3w6pk9?file=%2Fapp.vue

Steps to reproduce

  1. By default the preview will never end loading
  2. Change the line in /app.vue
-const enabled = ref(false);
+const enabled = ref(true);
  1. Refresh preview

Expected behavior

Instantly exit suspense() as there's nothing to fetch while ssr.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

nuxt^3.5.2
Windows 11
Chrome 126

Tanstack Query adapter

vue-query

TanStack Query version

5.45.0

TypeScript version

No response

Additional context

This only reproducible when using useInfiniteQuery(), useQuery() is not affected:

-const { data, suspense } = useInfiniteQuery({
+const { data, suspense } = useQuery({
  queryKey: ['test'],
  queryFn: fetcher,
-  initialPageParam: '',
-  getNextPageParam: () => '',
  enabled
})
n0099 added a commit to n0099/open-tbm that referenced this issue Jun 22, 2024
* enable ref `shouldFetch` by default as workaround of TanStack/query#7609 @ pages/posts.vue
@ fe
n0099 added a commit to n0099/open-tbm that referenced this issue Jun 22, 2024
* enable ref `shouldFetch` by default as workaround of TanStack/query#7609 @ pages/posts.vue
@ fe
n0099 added a commit to n0099/open-tbm that referenced this issue Jun 22, 2024
* fix never thrown `ApiResponseError` as `FetchError` will be throw when the response status code is not 2xx @ api/index.ts
* enable ref `shouldFetch` by default as workaround of TanStack/query#7609 @ pages/posts.vue
@ fe
@DamianOsipiuk
Copy link
Contributor

@n0099 This is done on purpose in response to an old ticket, where this particular behavior was requested.

And since it's rather easy to skip suspense() call with condition during SSR, it currently supports both use-cases.

Related tickets:

@n0099 n0099 closed this as not planned Won't fix, can't repro, duplicate, stale Jun 27, 2024
@n0099
Copy link
Author

n0099 commented Jun 27, 2024

#4924 (comment)

onServerPrefetch(async () => { // https://github.com/TanStack/query/issues/7609
    if (toValue(toValue(options)?.enabled) ?? true)
        await ret.suspense();
});

n0099 added a commit to n0099/open-tbm that referenced this issue Jun 27, 2024
…pages/posts.vue` @ api/index.ts

* fix still trying to render `<PageNextButton>` that inside `<PostPage>` with non-existing route name `posts/cursor` after changing the route from non empty to empty query
* fix watching on `isFetching` will get debounced without `flush: sync` while prefetch in SSR
* fix hydrated state `queryStartedAtSSR` might be `0` when prefetch failed while SSR @ watcher for `*UpdatedAt`
@ pages/posts.vue
@ fe
@n0099
Copy link
Author

n0099 commented Jun 28, 2024

How do I make this compatible with #7566 that introduced a param query to the callback variant of enabled?
It's a mess: n0099/open-tbm@407685a#diff-0f75652bede5b3ab02fab6d24c628b1963347f8aa2d54ff8e23bd738a0941250R113

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

No branches or pull requests

3 participants