useInfiniteQuery clashes with useQuery for the same query results in error

[longzheng]

openapi-react-query version

0.3.0

Description

Using useInfiniteQuery concurrently with useQuery (on the same page) will lead to an TypeError: Cannot read properties of undefined (reading 'length') exception at

function getNextPageParam(options, { pages, pageParams }) {
  const lastIndex = pages.length - 1;

Upon debugging the reason for this is very simple actually, the queryKey generated for both queries will be the same because the method path init are shared between the two.

openapi-typescript/packages/openapi-react-query/src/index.ts

Line 220 in 989635a

const { queryKey } = queryOptions(method, path, init);

However the data type between the two is different, for useInfiniteQuery the data is

interface InfiniteData<TData, TPageParam = unknown> {
    pages: Array<TData>;
    pageParams: Array<TPageParam>;
}

whereas for useQuery it's just TData.

So when the useInfiniteQuery runs, it'll reuse the same cache as the useQuery which results in getNextPageParams unable to access the data.pages.

I believe the solution is for the queryKey to be unique for the useInfiniteQuery function.

Reproduction

One query used in both useQuery and useInfiniteQuery will trigger exception.

    const {} = $api.useQuery(`get`, `/api/test`, {}, {});
    const {} = $api.useInfiniteQuery(`get`, `/api/test`, {}, {});

Expected result

I can use the same query in both useQuery and useInfiniteQuery successfully.

Extra

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