Dynamic query import via use() is failing

[dahaca]

Describe the bug

I've been trying to create a component which would encapsulate data loading logic, to have the most granular approach to using <Suspense/>, avoiding UI duplication with skeletons. My goal was to have one component which would handle suspending, fallback UI, loading, polling, errors, etc, and be used in a server component like so:

 <AsyncValue
    query={useSomeQuery} // query wrapper fn or potentially a query wrapper fn name string 
    queryProps={{
        itemId: "0001", // optional query props 
    }}
    dataKey="name" // optional accessor to a value which `extends ReactNode` in case an object is returned 
    render={Value} // Some valid React compoennt 
/>

This, afaik, would result in everything but the suspended value being pre-rendered server-side, eliminating the need to care about large skeletons, duplicating layout components or what not. Thought that would be neat?

I have arrived at a working solution, but a hacky one, as it used throw to trigger <Suspense />. When it struck me that we now have the use() hook to handle exactly what I thought was needed – keeping a component suspended while dynamically importing a query. However, when I tried using it I saw:

Error: Update hook called on initial render. This is likely a bug in React. Please file an issue.

Even though it seems to function. The data fetch is fired on the server, response is streamed to the client, where the useSuspenseQuery hook proceeds to poll and update the value.

I am well aware this whole approach might be DoA because it might break something under the hood of the useSuspenceQuery itself. Or that it might be a React bug – R19 is not out yet after all! However, since I haven't seen anyone trying to achieve all this, considered it would be useful to bring it up here anyways :)

TLDR:

• Is dynamically importing queries even viable or it ruins logic under the hood?
• Is dynamically importing suspense queries which use streaming any different?
• If is is viable, can it be done via a use() hook?

Your minimal, reproducible example

https://codesandbox.io/p/devbox/6xmt4y

Steps to reproduce

See the Sandbox 🫡

Expected behavior

Work with use() like it does without it.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Likely not relevant

Tanstack Query adapter

react-query

TanStack Query version

5.59.20

TypeScript version

5.6.3

Additional context

Using "@tanstack/react-query-next-experimental"

Related issue

facebook/react#31640

[dahaca]

After a discussion with one of the React maintainers, turns out that using use() for a dynamic import like that is valid, providing the import promise is cached.

However, there is also, technically, a possibility to let useSuspenseQuery() handle the hook import while triggering <Suspense />:

"use client";

import { useSuspenseQuery } from "@tanstack/react-query";

type QueryModule = Record<string, unknown>;

async function loadQuery(queryName: string) {
  const mod = (await import(`~/queries/${queryName}`)) as QueryModule;
  const queryModule = mod[queryName];

  if (!queryModule) {
    throw new Error(`Query ${queryName} not found in module`);
  }

  return queryModule;
}

export const useDynamicQuery = (queryName: string) => {
  const { data } = useSuspenseQuery({
    queryKey: ["dynamicQuery", queryName],
    queryFn: () => loadQuery(queryName),
  });

  return data;
};

Link to the sandbox

This begs the question: will the dynamically imported useSuspenseQuery() behave as intended? From what I can observe in the sandbox and in the app I am working on – everything works fine: the query triggers on the server and on the client, <Suspense /> works. Still, I would love to get some feedback to ensure that I am not bending the library API too much. In case it's all good, perhaps other people would find use in this pattern as well?

AFAIK, @TkDodo, you might have the expertise to help close the issue 🙏

[TkDodo]

useSuspenseQuery currently throws a promise - we don’t use use yet.

I want to maybe go away from exposing a dedicated useSuspenseQuery hook - a new API we’re working on is more like:

const { promise } = useQuery(...)

const data = use(promise)

this already exists as an experimental feature. Maybe you can try out that. Note: you have to set experimental_prefetchInRender: true.

[dahaca]

Thanks for the swift reply! Yeah, I have seen that API and that's one of the reasons for tagging you actually 😅

However, I have attempted a re-factor and arrived to an infinite Suspense :( The docs for the feature are somewhat sparse because of it's experimental status so it's not easy to debug. But the most crucial difference between experimental_prefetchInRender and useSuspenseQuery is how in the working example I had, the useSuspenseQuery() was not only used to fetch a value but also for polling and the isFetching status, which cannot be achieved with this, can it? Again the docs are sparse and I might be missing something obvious.

Full reproduction

"use client";

import { use } from "react";

import { useQuery } from "@tanstack/react-query";

type QueryModule = Record<string, unknown>;

async function loadQuery(queryName: string) {
  const mod = (await import(`~/queries/${queryName}`)) as QueryModule;
  const queryModule = mod[queryName];

  if (!queryModule) {
    throw new Error(`Query ${queryName} not found in module`);
  }

  return queryModule;
}

export const useDynamicQuery = (queryName: string) => {
  const { promise } = useQuery({
    queryKey: ["dynamicQuery", queryName],
    queryFn: () => loadQuery(queryName),
    experimental_prefetchInRender: true,
  });

  return use(promise);
};