Can't get the baseUrl from a scheme if using custom baseQuery

[olafur164]

I was digging around this looking into autogenerating our api client and typescript models for the FE from our swagger files and found this tool which looks awesome btw but I did get stuck on one thing. The thing is I want to make the generated api client get the accessToken for the user and add it to the header, I tried using a custom baseQuery but it doesn't seem to work.

Here's a code example:

curl -o petstore.json https://petstore3.swagger.io/api/v3/openapi.json
npx @rtk-incubator/rtk-query-codegen-openapi --baseQuery ./baseQuery.ts:baseQuery --hooks petstore.json > petstore-api.generated.ts

baseQuery.ts

import { FetchBaseQueryArgs } from '@reduxjs/toolkit/dist/query/fetchBaseQuery';
import { fetchBaseQuery } from '@reduxjs/toolkit/query';

export const baseQuery = ({ baseUrl, ...rest }: FetchBaseQueryArgs) =>
  fetchBaseQuery({
    baseUrl,
    prepareHeaders: async (headers, { getState }) => {
      headers.set('Some-header', 'some-value');
      return headers;
    },
  });

So based on this I would expect the output to be similar to what happens when you don't use a custom base query where you get this:

import { createApi } from "@reduxjs/toolkit/query/react";
import { fetchBaseQuery } from '@reduxjs/toolkit/query';
export const api = createApi({
  baseQuery: fetchBaseQuery({
      baseUrl: 'some-base-url-from-the-swagger-file,
  })
})

But what I actually get is this:

petstore-api.generated.ts output

import { createApi } from "@reduxjs/toolkit/query/react";
import { baseQuery } from "./baseQuery";
export const api = createApi({
  baseQuery: baseQuery,
  tagTypes: [],
  endpoints: (build) => ({
    updatePet: build.mutation<UpdatePetApiResponse, UpdatePetApiArg>({
      query: (queryArg) => ({ url: `/pet`, method: "PUT", body: queryArg.pet }),
    }),
    addPet: build.mutation<AddPetApiResponse, AddPetApiArg>({
      query: (queryArg) => ({
        url: `/pet`,
        method: "POST",
        body: queryArg.pet,
      }),
    }),
   ...
  })
})

Soo, any hints on how to get the baseUrl from our swagger file when using custom baseQuery?

[phryneas]

You'll have to do that by hand.
We are just preparing the release of the codegen in version 1.0, which will leave the whole api generation to the user and only create files with injectEndpoints from the Schema. That has the benefit that you can add a lot of custom code, with the drawback that the url is no longer injected anywhere.

Take a look here: reduxjs/redux-toolkit#1680

[olafur164]

So if I understand you correctly, with release 1.0 I would create something like this:

baseQuery.ts

import { FetchBaseQueryArgs } from '@reduxjs/toolkit/dist/query/fetchBaseQuery';
import { fetchBaseQuery } from '@reduxjs/toolkit/query';

export const baseQuery = ({ baseUrl, ...rest }: FetchBaseQueryArgs) =>
  fetchBaseQuery({
    baseUrl,
    prepareHeaders: async (headers, { getState }) => {
      headers.set('Some-header', 'some-value');
      return headers;
    },
  });

pets.api.ts

import { createApi } from '@reduxjs/toolkit/query';
import { baseQuery } from './baseQuery';

const petsApi = createApi({
  reducerPath: 'pets',
  baseQuery: baseQuery({ baseUrl: 'https://petstore3.swagger.io/api/' }),
  endpoints: () => ({
  }),
});

and then the code generation makes a file that extends the api above with the endpoints from the swagger?

curl -o petstore.json https://petstore3.swagger.io/api/v3/openapi.json
npx @rtk-incubator/rtk-query-codegen-openapi --baseQuery ./pets.api.ts:baseQuery --hooks pets.api.ts > pets.api.enhanced.ts

and then I would do:

import petsApi from 'api/pets.api.enhanced'

dispatch(petsApi.endpoints.getPets.initiate())

[phryneas]

Essentially, but you have a config file now, which allows for much more configuration (including multi-file output etc).

See https://raw.githubusercontent.com/reduxjs/redux-toolkit/rtk-query-codegen-openapi/docs/rtk-query/usage/code-generation.mdx

[olafur164]

Awesome, this looks really promising! Looking forward to the release. I'll close this issue now ☺️