How to use orval with React Query 5

[mrxsal]

I know React Query 5 is in Alpha, but i was hoping I could still use Orval.

What are the steps to reproduce this issue?

1. Install react-query v5.0.0-alpha.86

What happens?

after orval --config ./orval.config.js and the file is generated, the following part gives an error:

  const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
    queryKey: QueryKey;
  };

queryOptions can't be passed ot useQuery like this anymore. …

What were you expecting to happen?

It is expected behavior at the moment

…

Any logs, error output, etc?

The docs show the following change:

- useQuery(key, fn, options)
+ useQuery({ queryKey, queryFn, ...options })

…

Any other comments?

Is there a way I can adjust the config to pass the options correctly?

…

[anymaniax]

Hi, queryOptions is in the good format already normally. So it’s the type that isn’t good?

[mrxsal]

@anymaniax Yes, it seems to be a typing issue. Sorry I am still relatively new to Typescript and i was having trouble understanding the error.

Here's an example of the generated code:

const queryOptions = getSpacesListQueryOptions(params, options);
const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
  queryKey: QueryKey;
};

When I try to compile this code, I get the following TypeScript error:

No overload matches this call.
  Overload 1 of 2, '(options: UndefinedInitialDataOptions<AxiosResponse<SpacesList200, unknown>, TError, TData, QueryKey>, queryClient?: QueryClient | undefined): UseQueryResult<...>', gave the following error.
    Argument of type 'UseQueryOptions<AxiosResponse<SpacesList200, unknown>, TError, TData, QueryKey> & { queryKey: QueryKey; }' is not assignable to parameter of type 'UndefinedInitialDataOptions<AxiosResponse<SpacesList200, unknown>, TError, TData, QueryKey>'.
      Type 'UseQueryOptions<AxiosResponse<SpacesList200, unknown>, TError, TData, QueryKey> & { queryKey: QueryKey; }' is not assignable to type '{ initialData?: undefined; }'.
        Types of property 'initialData' are incompatible.
          Type 'AxiosResponse<SpacesList200, unknown> | InitialDataFunction<AxiosResponse<SpacesList200, unknown>> | undefined' is not assignable to type 'undefined'.
            Type 'AxiosResponse<SpacesList200, unknown>' is not assignable to type 'undefined'.
  Overload 2 of 2, '(options: DefinedInitialDataOptions<AxiosResponse<SpacesList200, unknown>, TError, TData, QueryKey>, queryClient?: QueryClient | undefined): DefinedUseQueryResult<...>', gave the following error.
    Argument of type 'UseQueryOptions<AxiosResponse<SpacesList200, unknown>, TError, TData, QueryKey> & { queryKey: QueryKey; }' is not assignable to parameter of type 'DefinedInitialDataOptions<AxiosResponse<SpacesList200, unknown>, TError, TData, QueryKey>'.
      Type 'UseQueryOptions<AxiosResponse<SpacesList200, unknown>, TError, TData, QueryKey> & { queryKey: QueryKey; }' is not assignable to type '{ initialData: AxiosResponse<SpacesList200, unknown> | (() => AxiosResponse<SpacesList200, unknown>); }'.
        Types of property 'initialData' are incompatible.
          Type 'AxiosResponse<SpacesList200, unknown> | InitialDataFunction<AxiosResponse<SpacesList200, unknown>> | undefined' is not assignable to type 'AxiosResponse<SpacesList200, unknown> | (() => AxiosResponse<SpacesList200, unknown>)'.
            Type 'undefined' is not assignable to type 'AxiosResponse<SpacesList200, unknown> | (() => AxiosResponse<SpacesList200, unknown>)'.

The error seems to be related to the initialData field in the queryOptions object. The type of initialData in queryOptions is AxiosResponse<SpacesList200, unknown> | InitialDataFunction<AxiosResponse<SpacesList200, unknown>> | undefined, but react-query v5 expects either undefined or AxiosResponse<SpacesList200, unknown> | (() => AxiosResponse<SpacesList200, unknown>).

[shahbazshueb]

I am also facing the same issue. Any resolutions for this issue?

[mrxsal]

@shahbazshueb, As @anymaniax mentioned, queryOptions is already in the right format, it's just a typing issue. Although it's bad practice, for now I ended up adding // @ts-nocheck to the top of my generated file to avoid the errors. The functions/hooks themselves are working fine.

[melloware]

I still think we should try and fix this correctly and not need ts-ignore

[melloware]

Can one of you try 6.19.1 which has a queryKey fix in it?

[maapteh]

@melloware please reopen

using version 6.23.0 and React-Query 5.17.1

I get the following error Property 'queryKey' is missing

[ruiaraujo012]

@melloware please reopen

using version 6.23.0 and React-Query 5.17.1

I get the following error Property 'queryKey' is missing

Same here

[ruiaraujo012]

@maapteh Version 6.22.1 doesn't have the problem.

975 another related issue

[melloware]

Hmmm here are the fixes between Orval 6.22.1 and 6.23.0 and its not much? https://github.com/anymaniax/orval/issues?q=is%3Aclosed+milestone%3A6.23.0

[maapteh]

useSnip({
    query: {
      retry: 0,
      gcTime: 0,
    },
  })

@soartec-lab ? for me 6.19.1 didnt fix the issue and i also do not see 6.22 gives a different result but maybe its too late :)

@ruiaraujo012 i runned it with 6.22.1

  │ 🍻 Start orval v6.22.1 - A swagger client generator for typescript
│ spa-config: Cleaning output folderanged)
│ 🎉 spa-config - Your OpenAPI spec has been converted into ready to use orval!

but i do not see the Partial, i get the same tsc compilation error. Maybe something in my pnpm setup is caching it but are we sure it worked in 6.22.1, and what react-query version do you use?

[ruiaraujo012]

@maapteh I've just downgraded from the latest to the 6.22.1, pnpm add -D oval@6.22.1 and run de generate again and it worked. I'm using the react query "@tanstack/react-query": "^5.17.0"

[maapteh]

Thanks both, so this was locally on our end in the end. Rui got it working, our setup takes little more time. But ticket can stay closed!

[soartec-lab]

The discussion on this issue ends with this, so I'll mark it.

[dinakar17]

@maapteh I've just downgraded from the latest to the 6.22.1, pnpm add -D oval@6.22.1 and run de generate again and it worked. I'm using the react query "@tanstack/react-query": "^5.17.0"

How did you do the generation using @tanstack/react-query library. I got the following error when I tried to generate the code.

Oups... 🍻. Client not found: @tanstack/react-query

This is my config file for orval

It seems like orval doesn't support the generation using the latest version i.e., react-query v5 which has been shifted to the @tanstack/react-query

[maapteh]

See, https://github.com/anymaniax/orval/blob/master/samples/react-query/basic/orval.config.ts#L10 use 'react-query' (Orval checks then if you are using v4 or v5)

The package @tanstack/react-query is the npm dependency which your app will need :) (and Orval eventually as well)

[dinakar17]

Finally, I understood. I've been googling for a while (probably more than a couple of hours). Thank you very much for saving time and answering it quickly. Really appreciate it.

[agamm]

I'm still getiing an error:

Versions:

    "orval": "^6.31.0",
    "typescript": "^5.5.3"
    "@tanstack/react-query": "^5.51.9",

 ⨯ TypeError: (0 , _tanstack_react_query__WEBPACK_IMPORTED_MODULE_2__.useQuery) is not a function
    at useDashboardDashboardGet (./src/apischema.ts:191:82)
    at Home (./src/app/page.tsx:11:108)
    at stringify (<anonymous>)
digest: "2998683142"
  450 |   const queryOptions = getDashboardDashboardGetQueryOptions(options);
  451 |
> 452 |   const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
      |                          ^
  453 |     queryKey: QueryKey;
  454 |   };
  455 |

[melloware]

It works fine for me. See my package.json: https://github.com/melloware/quarkus-primereact/blob/main/src/main/webui/package.json

see the whole app here: https://github.com/melloware/quarkus-primereact

If you want to run the whole app go here and run mvn quarkus:dev if you are a Java person.

[agamm]

@melloware It happens to me when I use react-query from the server (without "use client" on next) is this the reason?

[melloware]

@agamm yes SSR is a complex beast and tanStack has an entire guide on SSR: https://tanstack.com/query/v5/docs/framework/react/guides/ssr

I know other Orval users are using SSR just fine.