suspense is not working for useQueries

[wenerme]

Describe the bug

To Reproduce

const DemoA = () => {
  return (
    <Suspense fallback={'loading'}>
      <Works />
    </Suspense>
  );
};
const DemoB = () => {
  return (
    <Suspense fallback={'loading'}>
      <NotWork />
    </Suspense>
  );
};
const Works: React.FC = () => {
  // status success success success
  console.log(
    'status',
    [1, 2, 3]
      .map(
        (v) =>
          ({
            queryKey: ['users', v],
            queryFn: fetchApi,
            suspense: true,
          } as UseQueryOptions),
      )
      .map(useQuery)
      .map(({ status }) => status),
  );

  return null;
};
const NotWork: React.FC = () => {
  // status loading loading loading
  // status success loading loading
  // status success success loading
  // status success success success
  console.log(
    'status',
    useQueries(
      [1, 2, 3].map(
        (v) =>
          ({
            queryKey: ['users', v],
            queryFn: fetchApi,
            suspense: true,
          } as UseQueryOptions),
      ),
    ).map(({ status }) => status),
  );
  return null;
};

Expected behavior
useQueries should works like the useQuery loop, the result status should be success

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: chrome
• Version: react-query@3.5.5

Additional context

[tannerlinsley]

Confirmed. We'll look into this.

[jezzgoodwin]

Hi, I just wondered if there is an ETA for this bug to be looked at? I'm currently using a hacky workaround but it would be great to get a proper fix. Many thanks for the library.

[its-miller-time]

Hi, I just wondered if there is an ETA for this bug to be looked at? I'm currently using a hacky workaround but it would be great to get a proper fix. Many thanks for the library.

Im interested in what your workaround is....I came up with one as well but it doenst work in a new use case i have.

[jezzgoodwin]

Hi, I just wondered if there is an ETA for this bug to be looked at? I'm currently using a hacky workaround but it would be great to get a proper fix. Many thanks for the library.

Im interested in what your workaround is....I came up with one as well but it doenst work in a new use case i have.

Hi. My workaround is to create an async function which calls multiple APIs at once using Promise.all. And then call this function from React Query. It works but misses out on a lot of the power of React Query if each api call was handled separately.

[ag-m2ms]

Hi, sorry for necrobumping this issue, but for people who are looking for a workaround (until v4 is released) while keeping all of the power of react-query, we think we've came up with an acceptable solution. useQuery does suspend but you can't dynamically create useQuery hook calls, what you can dynamically create, though, is components which use useQuery. For each query in useQueries you can dynamically create a component, which calls useQuery with the provided query and renders nothing. To avoid manually having to create it, here's our solution using Context API.

Let's assume you have a custom component which you use to wrap your component tree with Suspense:

export const SuspenseWithBoundary = forwardRef(({ children, SuspenseProps = {}, ErrorBoundaryProps = {} }, ref) => {
  return (
    <ErrorBoundary
      ref={ref}
      onError={error => console.log(error.message)}
      fallbackRender={({ error }) => {
        return (
          <Alert severity="error">
            <AlertTitle>Error</AlertTitle>
            {error.message}
          </Alert>
        );
      }}
      {...ErrorBoundaryProps}
    >
      <Suspense fallback={<LoadingSpinner />} {...SuspenseProps}>
        {children}
      </Suspense>
    </ErrorBoundary>
  );
});

Let's create a context and a component which will receive a list of queries and then renders them under the Suspense component:

export const SuspendQueriesContext = createContext({
  addQueries: (id, queries) => {},
  removeQueries: id => {}
});

export const QueriesSuspender = ({ children }) => {
  // Store queries in a map where keys are IDs of the querying hooks
  const [queriesMap, setQueriesMap] = useState({});

  const addQueries = useCallback((id, queries) => {
    setQueriesMap(prevQueriesMap => ({
      ...prevQueriesMap,
      [id]: queries
    }));
  }, []);

  const removeQueries = useCallback(id => {
    setQueriesMap(prevQueriesMap => {
      const newQueriesMap = { ...prevQueriesMap };
      delete newQueriesMap[id];
      return newQueriesMap;
    });
  }, []);

  const value = useMemo(
    () => ({
      addQueries,
      removeQueries
    }),
    [addQueries, removeQueries]
  );

  return (
    <SuspendQueriesContext.Provider value={value}>
      {children}
      {Object.entries(queriesMap).map(([id, queries]) =>
        queries.map((query, index) => <QueryWrapper key={`${id}-${index}`} query={query} />)
      )}
    </SuspendQueriesContext.Provider>
  );
};

The QueryWrapper component looks like this:

export const QueryWrapper = ({ query }) => {
  useQuery(query);

  return null;
};

Add your newly created component to your custom Suspense component:

export const SuspenseWithBoundary = forwardRef(({ children, SuspenseProps = {}, ErrorBoundaryProps = {} }, ref) => {
  return (
    <ErrorBoundary
      ref={ref}
      onError={error => console.log(error.message)}
      fallbackRender={({ error }) => {
        return (
          <Alert severity="error">
            <AlertTitle>Error</AlertTitle>
            {error.message}
          </Alert>
        );
      }}
      {...ErrorBoundaryProps}
    >
      <Suspense fallback={<LoadingSpinner />} {...SuspenseProps}>
        <QueriesSuspender>{children}</QueriesSuspender>
      </Suspense>
    </ErrorBoundary>
  );
});

To add and remove queries which are to be rendered let's create a hook:

let generator = 0;

export const useSuspendQueries = queries => {
  // Each time queries change, generate a new ID. The reason for generating a new one once queries change is that
  // we can uniquely identify each query when rendering it in QueriesSuspender component.
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const id = useMemo(() => ++generator, [queries]);

  const { addQueries, removeQueries } = useContext(SuspendQueriesContext);

  // When id and queries change (they change at the same time), remove previous queries with previous ID and add
  // new queries with a new ID. useLayoutEffect is used to immediately mount the queries into the tree so the
  // the component tree immediately suspends if the queries haven't been resolved yet.
  useLayoutEffect(() => {
    addQueries(id, queries);

    return () => removeQueries(id);
  }, [id, addQueries, removeQueries, queries]);
};

Finally, create on more hook which you will use instead of using useQueries:

export const useSuspendingQueries = queries => {
  useSuspendQueries(queries);
  return useQueries(queries);
};

And this is how you use it, for example:

const results = useSuspendingQueries(
  useMemo(() => {
    return (
      targets?.map(target => {
        const queryKey = getMethodsQueryKey(target.id);

        return {
          queryKey,
          queryFn: () => axiosGet(queryKey)
        };
      }) || []
    );
  }, [targets])
);

The API is identical to the one useQueries uses, you don't have to add any other code. The mechanism automatically creates components which call useQuery for each query passed in as a parameter in the useSuspendingQueries and suspends the tree. Keep in mind, thought, that the array of queries passed should be memoized.

[TkDodo]

For each query in useQueries you can dynamically create a component, which calls useQuery with the provided query and renders nothing.

I don't think this can really work as we intended it to work with useQueries. Have a look at the proposal over here.

Basically, what we wanted to do is have multiple queries fire off at the same time, and then suspend until at least one (or all) have returned.

The solution with multiple useQuery instances that all have suspense:true turns that into a waterfall fetching:

• The first component mounts, triggers a query, we throw the Promise, which suspends
• This means the second component doesn't get a chance to start fetching!
• Once the first component finishes, suspense "continues", the second component can render, we throw the Promise again, so we suspend again.

This goes a lot against what useQueries was supposed to do, which is parallel fetching.

I really like the ideas that @lubieowoce has had in that regard, and I'm hoping that she will find the time to contribute that. It's likely not easy to implement, especially the mixed version where some queries suspend and some don't. The new useQueries api with the object syntax is merged already to v4, so I think everything that we'll add in that regard can be made backwards compatible, given that suspense doesn't work at all at the moment for useQueries.