Feature request: async data from useQuery

[denisborovikov]

The idea is to provide asyncData returned from useQuery hook. This is the same promise that returned from queryClient.fetchQuery.

Sometimes you need a data from the hook in the event handler, but at the moment when the event is fired, the data from the hook might be not be ready yet. There are few workarounds like disabling the handler before data is ready but this is not ideal in some cases.

const { data, asyncData, isLoading } = useQuery()

async function handleClick() {
   const data = await asyncData;
   clickCallback(data.count)
}

return <div>{data.count}</div>

It's possible to implement in the user land using a custom hook returning both useQeury and queryClient.fetchQuery(). What do you think if RQ could natively supports it?

[TkDodo]

We are thinking about something like this, mainly to integrate better with suspense and the new use hook, but no decision have been made.

One problem I see by sticking this into useQuery is that on first render, we don't have the promise yet, because it will be kicked off later, when the observer subscribes. This might even be delayed if we are currently restoring from a persister. So, where would we get that asyncData promise from?

Note that you can always call queryClient.fetchQuery() in your handleClick function and await it, and pass a staleTime to it so that it only fetches if data isn't older than that staleTime. If you just want any data, queryClient.ensureQueryData() also works.

[denisborovikov]

Thank you! Yes, I understand that I can always use queryClient.fetchQuery(). I'm looking for a better API so I don't need to use useQueryClient and implement almost all the same logic again, passing the query key and query function to the fetchQuery.

To me, having all these restrictions are good enough. Isn't fetchQuery would have the same issues?

[everythinginjs]

but you can not access all query options like refetchInterval

[everythinginjs]

@TkDodo I mixed react router defer + react query Would like to if there is a better solution I share my code for others here:

index.tsx

export function threadQuery(id: string) {
  return queryOptions({
    queryKey: ['thread', id],
    queryFn: async () => {
      return await threads.getOneById(id);
    },
  });
}

export function loader(queryClient: QueryClient) {
  return async ({ params }: LoaderFunctionArgs) => {
    if (!params.id) {
      throw new Error('No id provided');
    }

    const data = queryClient.ensureQueryData(threadQuery(params.id));
    return defer({ id: params.id, data });
  };
}

export default function Thread() {
  const { id, data } = useLoaderData() as Awaited<
    Promise<{ id: string; data: ThreadType }>
  >;

  return (
    <StyledList>
      <Suspense fallback={<SkeletonLoading />}>
        <Await resolve={data} errorElement={<ErrorPage />}>
          <ThreadMessages id={id} />
        </Await>
      </Suspense>
    </StyledList>
  );
}

ThreadMessages.tsx

type Props = {
  id: string;
};

export default function ThreadMessages({ id }: Props) {
  const { t } = useTranslation();
  const { data: threadMessages } = useSuspenseQuery(threadQuery(id));

  return (
    <>
      {threadMessages.data.map(({ text, id, created_by: createdBy }) => {
        return (
          <Fragment key={id}>
            <ChatBubble message={text} createdBy={createdBy} />
          </Fragment>
        );
      })}
      <ChatBubble message={t('page.ai.defaultIntroMsg')} />
    </>
  );
}