How can I specify the server hostname on the fly for the generated requests?

[lavocatt]

Hello,

I'm looking to use react-query and the code gen for a project. I'd like to be able to specify on the fly in my React component the host that would receive the query. In my use case I have several machines that could potentially receive the queries I want to send.

This is my request for now:

  const { data, isError } = useQuery({
    queryKey: [useSecurityServiceLogin],
    queryFn: () => {
      return SecurityService.login({
        formData: {
          brokerName: getBrokerKey(broker, ordinal),
          userName: userName,
          password: password,
          jolokiaHost: jolokiaHost,
          port: jolokiaPort,
          scheme: protocol,
        },
      });
    },
  });

  return [!isError, data['jolokia-session-id']];

And the generated SecurityService class:

export class SecurityService {
    /**
     * The login api
     * This api is used to login to a jolokia endpoint. It tries to get the broker mbean via the joloia url using the parameters passed in.
     *
     * If it succeeds, it generates a [jwt token](https://jwt.io/introduction) and returns
     * it back to the client. If it fails it returns a error.
     *
     * Once authenticated, the client can access the
     * apis defined in this file. With each request the client must include a valid jwt token in a http header named `jolokia-session-id`. The api-server will validate the token before processing a request is and rejects the request if the token is not valid.
     *
     * @param data The data for the request.
     * @param data.formData
     * @returns SimpleResponse Success
     * @throws ApiError
     */
    public static login(data: $OpenApiTs['/jolokia/login']['post']['req']): CancelablePromise<$OpenApiTs['/jolokia/login']['post']['res'][200]> {
        return __request(OpenAPI, {
            method: 'POST',
            url: '/jolokia/login',
            formData: data.formData,
            mediaType: 'application/x-www-form-urlencoded'
        });
    }

}

How can I put in ther the hostname and the port ?

Thanks.

[seriouslag]

@lavocatt

Modifying the OpenAPI config sounds precisely like what you need.

Changing the BASE URL option on the OpenAPI config.

Import the constant into your runtime and modify it with your env url before setting up the react app.

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

[lavocatt]

Thanks @seriouslag I have a question regarding this approach. It happens before creating the QueryClientProvider. Is there any way to have this change more dynamic? For instance having a list of endpoints and sending a request to each of them ? Is this feasible?

[seriouslag]

Thanks @seriouslag I have a question regarding this approach. It happens before creating the QueryClientProvider. Is there any way to have this change more dynamic? For instance having a list of endpoints and sending a request to each of them ? Is this feasible?

What do you mean by having a list of endpoints? Do you need to make the same request to multiple endpoints?

[lavocatt]

Indeed, I can have a multiple set of machines running a server and querying each of them is one of my use cases

[seriouslag]

Currently, there is no way to handle a per-request configuration. I opened an issue in the underlying service generator we use to add this feature.

Adding your use case there would be helpful to move this feature request along: https://github.com/hey-api/openapi-ts/issues/465