React 19 experimental with RQ and use hook

[igortas]

Hi,

I'm trying to wire up RQ with React 19 (maybe not possible at the moment). I'm trying to replace native fetch with queryClient.fetchQueryData.

I have code like this:

// @ts-ignore
import { Suspense, use } from 'react';

...

async function fetchUsers(queryClient: QueryClient) {
  const users = await queryClient.fetchQuery<TUserDetails[]>({
    queryKey: ['users']
  });
  return users;
}

export default function Users() {
  const queryClient = useQueryClient();
  const users = use(fetchUsers(queryClient));

  return (
    <Suspense fallback={<CircularProgress />}>
      <Users users={users.value} />
    </Suspense>
  );
}

React 19 throws:

index.tsx?t=1710111542534:31  Warning: A component was suspended by an uncached promise. Creating promises inside a Client Component or hook is not yet supported, except via a Suspense-compatible library or framework

Is there are way this example to work, in near future, maybe we get function like fetchSuspenseQuery?
Any thoughts on this approach?

package.json

"react": "^0.0.0-experimental-338dddc08-20240307",
"react-dom": "^0.0.0-experimental-338dddc08-20240307",

BR,

[TkDodo]

sorry, I'm not sure how we should create a cached promise. fetchQuery currently returns a new Promise every time - I guess the use hook doesn't like that ?

My initial idea for 19 would be:

const { promise } = useQuery()

const data = use(promise)

because there we could likely return the promise from the internal query.

[yanglee2421]

It seems better to generate the promise on the first call to use instead of when useQuery is called.

Maybe there should be a use for react-query instead of using react.use directly.

import { use } from '@tanstack/react-query';

export function MyComponent() {
  // The usage is the same as useSuspenseQuery,
  // And supports calling in conditional statements and loops
  const query = use({
    queryKey: ['key'],
    queryFn() {
      return fetch('/api');
    },
  });

  return <>{query.data}</>;
}

[igortas]

@TkDodo
It's possible to mix react 19 and RQ currently, my mistake was not using the queryFn.
Here is my working version...

// @ts-ignore
import { use, cache, Suspense } from 'react';
import { QueryClient, useQueryClient } from '@tanstack/react-query';
import { CircularProgress } from '@mui/material';

export const fetchUsers = cache(async (queryClient: QueryClient) => {
  return await queryClient.ensureQueryData({
    queryKey: ['users'],
    queryFn: () => fetch(url)
  });
});

export default function Users() {
  const queryClient = useQueryClient();
  const users = use(fetchUsers(queryClient));

  return (
    <Suspense fallback={<CircularProgress />}>
      <Component users={users} />
    </Suspense>
  );
}