React-query: Confusing behavior (or bug) with suspense + enabled flag

[flybayer]

Describe the bug

In an Next.js/Blitz app, the first render always has empty route parameters during static pre-rendering. This pre-render should render the Suspense loading fallback. This loading fallback does work properly if you leave useQuery enabled.

But the problem is that in suspense mode, you want the query to be disabled (so it doesn't query an API with empty data) while at the same time also rendering the loading fallback.

In 2.4.14, enabled: false will not trigger the suspense loading fallback.

For example, we have code similar to this:

export const Project = () => {
  const projectId = useParam("projectId", "number")
  const stuff = useQuery(['project', projectId], queryFn, { suspense: true, enabled: !!projectId })

  // ...

Maybe there's some other existing react-query config combo to get this behavior?

[marcosvega91]

Hi @flybayer thanks for opening this case :).

I think that the configuration is correct and this behaviour is strange, there is a test case for this here

I have created also a working case here. I have missed something in this case ?

EDIT:

I have created a new app following steps on the issue in your side but I don't have problem for now. I can see the project without problem.

[flybayer]

@marcosvega91 the problem is that I need a way to have enabled:false and have show the suspense loading fallback. This is for Next.js pre-rendering which needs to render the loading screen but without making an actual query.

Your example demonstrates this. The loading fallback only shows when enabled is true.

[tannerlinsley]

Workaround for this would be to pass a never resolving promise function on the server that won’t call your api but will trigger the suspense boundary.
On Jul 13, 2020, 7:14 AM -0600, Brandon Bayer [e-mail], wrote:

@marcosvega91 the problem is that I need a way to have enabled:false and have show the suspense loading fallback. This is for Next.js pre-rendering which needs to render the loading screen but without making an actual query.
Your example demonstrates this. The loading fallback only shows when enabled is true.
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or unsubscribe.

[flybayer]

My current workaround in Next.js & Blitz is to use the below hook to detect pre-render mode. If in pre-render, then I use a never resolving promise as the query function. Otherwise use the real data fetching function.

export const useIsDevPrerender = () => {
  const router = useRouter()
  if (process.env.NODE_ENV === "production") {
    return false
  } else {
    const currentRouteHasParameters = /\[.*\]/.test(router.pathname)
    const queryKeys = Object.keys(router.query)
    // This checks if query == {} || query == {amp: any}
    const queryIsEmpty =
      queryKeys.length === 0 || (queryKeys.length === 1 && queryKeys[0] === "amp")
    const isDevPrerender = currentRouteHasParameters && queryIsEmpty
    return isDevPrerender
  }
}

[tannerlinsley]

Interesting. Yeah, this seems like a good enough workaround. Until it becomes a massive issue for a majority of people. Keep tabs on this experience though and if it gets worse, we can keep working at something more native.

[flybayer]

Update. That previous hook had some problems (but I forget what lol).

Anyways, I'm now using this instead:

const isServer = typeof window === "undefined"

export const useIsDevPrerender = () => {
  if (process.env.NODE_ENV === "production") {
    return false
  } else {
    // useQuery is only for client-side data fetching, so if it's running on the
    // server, it's for pre-render
    return isServer
  }
}