Support Multiple API endpoints : I want to be able to change my API endpoint for specific business logic

[mattiLeBlanc]

Is this related to a new or existing framework?

Angular

Is this related to a new or existing API?

GraphQL API

Is this related to another service?

No response

Describe the feature you'd like to request

Hi,

I have a 3 SPA's (Angular) and 3 large Appsync APIS that serve each SPA App.
SPA1: Family app, linked to FamilyAPI
SPA2: Admin app, linked to Admin API
SPA3: MainApp, linked to ClientAPI

Some of the logic, for example image upload and conversion is done in the FamilyAPI. But sometimes I also need to do image upload and conversion in MainApp which is using ClientAPI, and I dont want to duplicate logic and create unnecessary lambda. So I call the FamilyAPI for those specific scenarios.

I configure my Amplify in each of the SPA's in the app.config.ts (loaded in main.ts) via

Amplify.configure(awsConfig.mainApp);

I create multiple resourceConfigs:

export interface ResourcesConfig {
    API?: APIConfig;
    Analytics?: AnalyticsConfig;
    Auth?: AuthConfig;
    Interactions?: InteractionsConfig;
    Notifications?: NotificationsConfig;
    Predictions?: PredictionsConfig;
    Storage?: StorageConfig;
    Geo?: GeoConfig;
}

so that my awsConfig has a config for each App and API.
They all point to the same Cognito Pool.

So in my Angular Api Service, I have a graphql call

private executeGraphQL<V>({ statement: query, variables, type, iam = false, familyApi = false }: queryInput): Observable<V> {
    if (familyApi) {
      Amplify.configure(FAMILY_APP_CONFIG);
    } else {
      Amplify.configure(APP_CONFIG);
    }

in where I can switch the configuration to the Family app config for this call. And otherwise it uses the default config for that App.
This works, but is probably not correct because by doing this I am reinitialising the whole Amplify config and that may cause stopping and starting Appsync subscriptions or causing other conflicts.
I am not sure about the bad sides of this approach.

Can you support a way where I configure Amplify at the main.ts as I do now and allow me to update the endpoint the generateClient is using for a specific call?

Lastly, I know you recommend using one API ( I prefer not too due to separation of concerns for each SPA/API) or even merging the APIs during deploy; I am aware of this but I dont yet have time to explore that due to heavy workload.

Describe the solution you'd like

Can you support a way where I configure Amplify at the main.ts as I do now and allow me to set the endpoint the generateClient is using for a specific call?

Describe alternatives you've considered

The solution I am using in the original request is my alternative

Additional context

No response

Is this something that you'd be interested in working on?

• 👋 I may be able to implement this feature request
• ⚠️ This feature might incur a breaking change

[mattiLeBlanc]

I am trying this now

private executeGraphQL<T>({ statement: query, variables, type, iam = false, familyApi = false }: queryInput): Observable<T> {
    console.log('Family API?', type, familyApi)

    const payload: any = {
      query,
      authMode: iam ? 'iam' : 'userPool',
      ...(variables && { variables }),
      ...(familyApi && {
        endpoint: FAMILY_APP_CONFIG.API.GraphQL.endpoint
      }),
    };

return from(this.client.graphql(payload)).pipe(
...

but overwrite of endpoint is ignored.
What is the correct way of doing this?

[mattiLeBlanc]

The source code of the graphql function is as follows:

 * @param options
 * @param additionalHeaders
 */
function graphql(options, additionalHeaders) {
    // inject client-level auth
    const internals = getInternals(this);
    /**
     * The custom `endpoint` specific to the client
     */
    const clientEndpoint = internals.endpoint;
    /**
     * The `authMode` specific to the client.
     */
    const clientAuthMode = internals.authMode;
    /**
     * The `apiKey` specific to the client.
     */
    const clientApiKey = internals.apiKey;
    /**
     * The most specific `authMode` wins. Setting an `endpoint` value without also
     * setting an `authMode` value is invalid. This helps to prevent customers apps
     * from unexpectedly sending auth details to endpoints the auth details do not
     * belong to.
     *
     * This is especially pronounced for `apiKey`. When both an `endpoint` *and*
     * `authMode: 'apiKey'` are provided, an explicit `apiKey` override is required
     * to prevent inadvertent sending of an API's `apiKey` to an endpoint is does
     * not belong to.
     */
    options.authMode = options.authMode || clientAuthMode;
    options.apiKey = options.apiKey ?? clientApiKey;
    options.authToken = options.authToken || internals.authToken;
    if (clientEndpoint && options.authMode === 'apiKey' && !options.apiKey) {
        throw new Error("graphql() requires an explicit `apiKey` for a custom `endpoint` when `authMode = 'apiKey'`.");
    }
    const headers = additionalHeaders || internals.headers;
    /**
     * The correctness of these typings depends on correct string branding or overrides.
     * Neither of these can actually be validated at runtime. Hence, we don't perform
     * any validation or type-guarding here.
     */
    const result = GraphQLAPI.graphql(
    // TODO: move V6Client back into this package?
    internals.amplify, {
        ...options,
        endpoint: clientEndpoint,
    }, headers);
    

I could suggest this change:

    const clientEndpoint = options.endpoint ??  internals.endpoint;

which would allow us to override the endpoint.
The typing suggest I am allowed to use endpoint:

}
/**
 * Common options that can be used on public `generateClient()` interfaces.
 */
export type CommonPublicClientOptions = DefaultCommonClientOptions | {
    endpoint: string;
    authMode: 'apiKey';
    apiKey: string;
    authToken?: string;
    headers?: CustomHeaders;
} | {
    endpoint: string;
    authMode: Exclude<GraphQLAuthMode, 'apiKey'>;
    apiKey?: string;
    authToken?: string;
    headers?: CustomHeaders;
};

but it is currently ignored.
Can we have that change made?

@bobbor

[Simone319]

Hello @mattiLeBlanc , thank you for raising this request. We will look into it and provide you with an update shortly.

[Simone319]

Hello @mattiLeBlanc , have your tried using generateClient with the endpoint you would like to use? For example:

import { generateClient } from 'aws-amplify/data';

const client = generateClient({
  endpoint: 'https://my-other-endpoint.com/graphql',
});

Amplify docs reference: https://docs.amplify.aws/angular/build-a-backend/data/connect-to-API/#use-an-additional-data-endpoint

[mattiLeBlanc]

@Simone319 Are you sure that is also supported for aws-amplify/api?
I just tried, and you are right. It is working. I thought I tried it before and it wasn't honouring it but now I think it works as expected.

Can you expose some of your typings?
When I do:

 private client = generateClient({
    endpoint: awsConfig.familyApp.API.GraphQL.endpoint,
    authMode: awsConfig.familyApp.API.GraphQL.defaultAuthMode,
  });

get a TS error on authMode:

Argument of type '{ endpoint: string; authMode: GraphQLAuthMode; }' is not assignable to parameter of type 'CommonPublicClientOptions'.
  Type '{ endpoint: string; authMode: GraphQLAuthMode; }' is not assignable to type '{ endpoint: string; authMode: "oidc" | "userPool" | "iam" | "identityPool" | "lambda" | "none"; apiKey?: string; authToken?: string; headers?: CustomHeaders; }'.
    Types of property 'authMode' are incompatible.
      Type 'GraphQLAuthMode' is not assignable to type '"oidc" | "userPool" | "iam" | "identityPool" | "lambda" | "none"'.
        Type '"apiKey"' is not assignable to type '"oidc" | "userPool" | "iam" | "identityPool" | "lambda" | "none"'

it expects a key of GraphQLAuthMode but that type is not exposed.

Thank you so much for your tip, it works perfectly.