Non-reactive query params in Vue when using useInfiniteQueryParam

[Skanislav]

What are the steps to reproduce this issue?

1. Declare the Orval configuration to include TSQ configuration like so:

query: {
      useQuery: true,
      useInfinite: true,
      useInfiniteQueryParam: 'offset',
}

2. Generated code will include this

export const getProposalListInfiniteQueryOptions = <TData = InfiniteData<Awaited<ReturnType<typeof proposalList>>, ProposalListParams['offset']>, TError = unknown>(params?: MaybeRef<ProposalListParams>, options?: { query?:Partial<UseInfiniteQueryOptions<Awaited<ReturnType<typeof proposalList>>, TError, TData, Awaited<ReturnType<typeof proposalList>>, QueryKey, ProposalListParams['offset']>>, request?: SecondParameter<typeof customInstance>}
) => {

const {query: queryOptions, request: requestOptions} = options ?? {};

  const queryKey =  getProposalListQueryKey(params);

    const queryFn: QueryFunction<Awaited<ReturnType<typeof proposalList>>, QueryKey, ProposalListParams['offset']> = ({ pageParam }) => proposalList({...params, offset: pageParam || unref(params)?.['offset']}, requestOptions);


   return  { queryKey, queryFn,   staleTime: 10000, refetchOnWindowFocus: false,  ...queryOptions} as UseInfiniteQueryOptions<Awaited<ReturnType<typeof proposalList>>, TError, TData, Awaited<ReturnType<typeof proposalList>>, QueryKey, ProposalListParams['offset']> 
}

in the component we use it like so

const reqParams = computed<ProposalListParams>(() => {
  return {
    limit: fetchSize,
  }
})

const { data, fetchNextPage, isFetching, isLoading } = useProposalListInfinite(
  reqParams,
  ...

3. If we manually change generated type to be

- proposalList({...params, offset: pageParam || unref(params)?.['offset']}
+ proposalList({...unref(params), offset: pageParam || unref(params)?.['offset']}

Reactivity is restored.

What happens?

no params are passed to the actual query since we distructed the MaybeRef object

What were you expecting to happen?

reactive params are passed to the actual query

Any other comments?

To me it seems like this piece of code is missing an extra condition for unwrapping the vue ref

https://github.com/anymaniax/orval/blob/bc3d277469b35f5e60f66fcf302c30733e75aed0/packages/query/src/index.ts#L933-L938

          return param.name === 'params'
-            ? `{...params, ${queryParam}: pageParam || ${
+            ? `{...${isVue(outputClient) ? `unref(params)` : `params`}, ${queryParam}: pageParam || ${
                isVue(outputClient)
                  ? `unref(params)?.['${queryParam}']`
                  : `params?.['${queryParam}']`
              }}`

What versions are you using?

Package Version: 6.28.2

[melloware]

@Maxim-Mazurok isn't this just like this other Vue Infinite that was fixed or attempted? #943

[Maxim-Mazurok]

@Maxim-Mazurok isn't this just like this other Vue Infinite that was fixed or attempted? #943

Nah, as I just mentioned in PR, #1379 (comment)

We never really considered or tested reactivity for infinite feature as we don't use it. So it's quite likely it never worked, just like everything else before our reactivity fixes.