I am sorry if this question sounds dumb but it´s 100% real. If this question doesn´t belong here post a link to redirect me to the site it belongs.

I am integrating OpenAPI in one of my projects and I have documented the backend api of said project. Then I obtained the yaml file containing the OpenAPI doc and I installed on my react project the following npm package:

npm install @openapitools/openapi-generator-cli

And then I ran:

openapi-generator-cli generate -i api-docs.yaml -g typescript-axios -o api 

This command generated the following folder:

C:.
│   .gitignore
│   .npmignore
│   .openapi-generator-ignore
│   api.ts
│   base.ts
│   common.ts
│   configuration.ts
│   git_push.sh
│   index.ts
│
├───.openapi-generator
│       FILES
│       VERSION
│
└───docs
        // Docs about my classes

I have several questions about this generated folder.

Should I separate the http requests from api.ts in different files? Should I do the same with interface files too?

Why there are three different ways of making the request and what are the differences between each one? Could someone provide an example of how to use them? This is one of them:

/**
 * ItemApi - axios parameter creator
 */
export const ItemApiAxiosParamCreator = function (configuration?: Configuration) {
        /**
         * Returns an item using an string as parameter
         * @summary Get item by name
         * @param {string} itemName The item name to search
         * @param {*} [options] Override http request option.
         * @throws {RequiredError}
         */
        getItemByName: async (itemName: string, options: RawAxiosRequestConfig = {}): Promise => {
            // verify required parameter 'itemName' is not null or undefined
            assertParamExists('getItemByName', 'itemName', itemName)
            const localVarPath = `/itemData/getItemByName/{itemName}`
                .replace(`{${"itemName"}}`, encodeURIComponent(String(itemName)));
            // use dummy base URL string because the URL constructor only accepts absolute URLs.
            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
            let baseOptions;
            if (configuration) {
                baseOptions = configuration.baseOptions;
            }

            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
            const localVarHeaderParameter = {} as any;
            const localVarQueryParameter = {} as any;

            localVarHeaderParameter['Accept'] = '*/*';

            setSearchParams(localVarUrlObj, localVarQueryParameter);
            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};

            return {
                url: toPathString(localVarUrlObj),
                options: localVarRequestOptions,
            };
        },
    
};

/**
 * ItemApi - functional programming interface
 */
export const ItemApiFp = function(configuration?: Configuration) {
    const localVarAxiosParamCreator = ItemApiAxiosParamCreator(configuration)
    return {
        
        /**
         * Returns an item using an string as parameter
         * @summary Get item by name
         * @param {string} itemName The item name to search
         * @param {*} [options] Override http request option.
         * @throws {RequiredError}
         */
        async getItemByName(itemName: string, options?: RawAxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise> {
            const localVarAxiosArgs = await localVarAxiosParamCreator.getItemByName(itemName, options);
            const localVarOperationServerIndex = configuration?.serverIndex ?? 0;
            const localVarOperationServerBasePath = operationServerMap['ItemApi.getItemByName']?.[localVarOperationServerIndex]?.url;
            return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, localVarOperationServerBasePath || basePath);
        },
    }
};

/**
 * ItemApi - factory interface
 */
export const ItemApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
    const localVarFp = ItemApiFp(configuration)
    return {

        /**
         * Returns an item using an string as parameter
         * @summary Get item by name
         * @param {string} itemName The item name to search
         * @param {*} [options] Override http request option.
         * @throws {RequiredError}
         */
        getItemByName(itemName: string, options?: RawAxiosRequestConfig): AxiosPromise {
            return localVarFp.getItemByName(itemName, options).then((request) => request(axios, basePath));
        },
    };
};

/**
 * ItemApi - object-oriented interface
 */
export class ItemApi extends BaseAPI {

    /**
     * Returns an item using an string as parameter
     * @summary Get item by name
     * @param {string} itemName The item name to search
     * @param {*} [options] Override http request option.
     * @throws {RequiredError}
     */
    public getItemByName(itemName: string, options?: RawAxiosRequestConfig) {
        return ItemApiFp(this.configuration).getItemByName(itemName, options).then((request) => request(this.axios, this.basePath));
    }
}

Btw, the react project is a fully functional project. I would just have to swap the async requests, nothing else