$api.queryOptions query does not return queryClient.fetchQuery promise if used with useSuspenseQuery

[longzheng]

openapi-react-query version

0.5.0

Description

A single query created with $api.queryOptions that is used as both a suspense query useSuspenseQuery and a manually invoked query queryClient.fetchQuery will cause the fetchQuery promise to never return, leading to an unexpected inability to fetch API data.

This also happens with the wrapped $api.useSuspenseQuery but I simplified the repro to narrow the issue down.

Reproduction

I created a demo repro https://stackblitz.com/edit/tanstack-query-kt62dfh2?file=src%2Findex.tsx&preset=node

It uses a very simple client from the example app in the repo

const client = createFetchClient<paths>({ baseUrl: 'https://catfact.ninja/' });
const $api = createClient(client);
const query = $api.queryOptions('get', '/fact');

And then a very simple component that uses useSuspenseQuery(query) and a manual useQuery with await queryClient.fetchQuery(query)

function Example() {
  const { data: suspenseData } = useSuspenseQuery(query);
  console.log('suspense data', suspenseData);

  const { isPending, error, data, isFetching } = useQuery({
    queryKey: ['test'],
    queryFn: async () => {
      const data = await queryClient.fetchQuery(query);
      console.log('queryFn data', data);

      return data;
    },
  });

When ran, the await queryClient.fetchQuery(query) never returns, and neither does the queryFn, and so the useQuery is stuck pending.

The network requests tab shows an aborted second query (which I assume to be the fetchQuery)

If you open DevTools, you'll see a console log for suspense data but not for queryFn data.

I narrowed the problem down to $api.queryOptions because if you use the openapi-fetch client directly by replacing the query with client.GET, the issue does not occur.

const query = queryOptions({
  queryKey: ['catfact'],
  queryFn: async () => {
    return client.GET('/fact');
  },
});

(Interestingly I can only reproduce this with <StrictMode>. If you comment out <StrictMode> then the issue does not occur.)

Expected result

I can use useSuspenseQuery with queryClient.fetchQuery together for the same query and both should return data correctly.

If I comment out/remove the useSuspenseQuery, the fetchQuery returns.

Or if I use the openapi-fetch client directly

Extra

• I’m willing to open a PR (see CONTRIBUTING.md)

[longzheng]

I seem to be able to also reproduce this with the openapi-fetch if I pass the queryFn signal into it

const query = queryOptions({
  queryKey: ['/get', 'catfact'],
  queryFn: async ({ signal }) => {
    return client.GET('/fact', { signal });
  },
});

So maybe this isn't a bug with openapi-react-query but openapi-fetch?

[longzheng]

Actually nevermind I reproduced this even without openapi-fetch but just fetch directly. This seems to be a quirk/bug of TanStack Query when signal is handled for queryFn.

https://stackblitz.com/edit/tanstack-query-qjpbgwfe?file=src%2Findex.tsx&preset=node

I created a TanStack Query issue TanStack/query#9440