Sample Request Generation

[AdzeB]

Hi, I really like this project, but I have an issue with the sample request on the example project.

It gets a bit confusing on how it works:

1.  So based on the example project, you would need types like onCancel, OpenAPIConfig meaning you have to run the codegen first before you can even access the types
2. The Sample request.ts file differs from the  request file generated from the latest version of the app
3. if I were to use my own request but just want to change the baseUrl and Header, I would need to either update the path of the types, which would cause the generated request.ts file inside the core folder to call a path that doesn't exist, if I were to put my custom request inside the code folder it will be deleted upon the code gen.

I want to ask how the request generation should work or am I using it incorrectly?

[seriouslag]

The request file is used to override the default request file that is generated by @hey-api/openapi-ts
We use that to generate the service and model typescript files from the OpenAPI spec.

You'll only need a custom request file to override the default handling of requests.
The request file will probably have type errors because it needs to be outside the generated file's location (it will be copied to the generated file's location when the code-gen is executed).

If you only want to change the baseUrl and headers then I recommend not supplying a request file and modifying the OpenAPI singleton constant that is used for each request, it is exported from openapi/requests/core/OpenAPI by default.

[AdzeB]

Oh, Thank you. Do you want me to modify the OpenAPI in the file directly or create another file that modifies it?

[seriouslag]

Oh, Thank you. Do you want me to modify the OpenAPI in the file directly or create another file that modifies it?

import the constant into your runtime and modify it before setting up the react app.

/** main.tsx */
import { OpenAPI as OpenAPIConfig } from './openapi/requests/core/OpenAPI';
...
OpenAPIConfig.BASE = 'www.domain.com/api';
OpenAPIConfig.HEADERS = {
  'X-Header1': 'header-1'
  'X-Header2': 'header-2'
};
...
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
);

[AdzeB]

Oh, I see; thank you. I use Next 14, so I will just update the layout.tsx

[seriouslag]

Opened PR #88 to add info in readme.

[AdzeB]

@seriouslag @7nohe just wanted to add that if you are using nextJS, to set the OpenAPIConfig you need to put it inside a 'use client' provider(or depending on your project your provider root)

[seriouslag]

@seriouslag @7nohe just wanted to add that if you are using nextJS, to set the OpenAPIConfig you need to put it inside a 'use client' provider(or depending on your project your provider root)

Thanks for the info.
I don't use next/ssr. It would be awesome if you opened a PR to add the info to the readme.