Cannot call REST api from web worker using aws-ampliy

[alex-breen]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

REST API

Amplify Version

v6

Amplify Categories

api

Backend

Amplify CLI

Environment information

# Put output below this line
  System:
    OS: Windows 11 10.0.22621
    CPU: (6) x64 Intel(R) Core(TM) i5-9600K CPU @ 3.70GHz
    Memory: 3.06 GB / 15.94 GB
  Binaries:
    Node: 18.18.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 120.0.6099.217
    Edge: Chromium (120.0.2210.133)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @aws-amplify/ui-react: ^6.1.1 => 6.1.1
    @aws-amplify/ui-react-internal:  undefined ()
    @aws-amplify/ui-react-storage: ^3.0.10 => 3.0.10
    @types/react: ^18.2.43 => 18.2.47
    @types/react-dom: ^18.2.17 => 18.2.18
    @vitejs/plugin-react: ^4.2.1 => 4.2.1
    aws-amplify: ^6.0.12 => 6.0.12
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/enable-oauth-listener:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    eslint: ^8.55.0 => 8.56.0
    eslint-plugin-react: ^7.33.2 => 7.33.2
    eslint-plugin-react-hooks: ^4.6.0 => 4.6.0
    eslint-plugin-react-refresh: ^0.4.5 => 0.4.5
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    vite: ^5.0.8 => 5.0.11
  npmGlobalPackages:
    @forge/cli: 4.1.1
    atlas-connect: 0.8.1
    firebase-tools: 10.7.0
    mongodb-realm-cli: 2.4.2
    npm-check-updates: 12.5.9
    npm: 10.1.0
    serve: 14.2.1

Describe the bug

From a web worker (on Chrome), invoking a get request to Amplify REST API fails with the following error.
GET call failed: InvalidApiName: API name is invalid.

The same request running in the main thread is successful.

Expected behavior

Works the same as when invoked in the main thread.

Reproduction steps

Please see code in snippet below.

Code Snippet

// Put your code below this line.
// WEB WORKER CODE (FAILS)
/* eslint-disable no-restricted-globals */
import { get } from "aws-amplify/api";
console.log("Worker started");

async function getFcn() {
    try {
        const restOperation = get({
            apiName: 'sandbox1',
            path: '/sandbox1'
        });
        const response = await restOperation.response;
        console.log('GET call succeeded: ', response);
    } catch (error) {
        console.log('GET call failed: ', error);
    }
}
getFcn();

// MAIN THREAD CODE (WORKS - see get request within useEffect)
import '@aws-amplify/ui-react/styles.css';
import { get } from 'aws-amplify/api';
import { useEffect, useMemo } from 'react';

const Page = () => {
    const myWorker = useMemo(() => {
        return new Worker(new URL("./worker1.js", import.meta.url), {
            type: "module"
        })
    }, [])

    myWorker.postMessage('Hi worker')
    myWorker.onmessage = function (e) {
        console.log('Message received from worker', e);
    }

    useEffect(() => {
        async function getFcn() {
            try {
                const restOperation = get({
                    apiName: 'sandbox1',
                    path: '/sandbox1'
                });
                const response = await restOperation.response;
                console.log('GET call succeeded: ', response);
            } catch (error) {
                console.log('GET call failed: ', error);
            }
        }
        getFcn();
    }, []);

    return (
        <div>
            Hello again
        </div>
    )
};

export default Page;

Log output

Browser console log below. (Note, no network log as I don't think an attempt to make the call is made.) ``` // Put your logs below this line GET call failed: InvalidApiName: API name is invalid. at assertValidationError (http://localhost:3000/node_modules/.vite/deps/aws-amplify_api.js?v=77a22174:7280:11) at resolveApiUrl (http://localhost:3000/node_modules/.vite/deps/aws-amplify_api.js?v=77a22174:7288:3) at http://localhost:3000/node_modules/.vite/deps/aws-amplify_api.js?v=77a22174:7381:15 at job (http://localhost:3000/node_modules/.vite/deps/aws-amplify_api.js?v=77a22174:7211:69) at createCancellableOperation (http://localhost:3000/node_modules/.vite/deps/aws-amplify_api.js?v=77a22174:7243:24) at publicHandler (http://localhost:3000/node_modules/.vite/deps/aws-amplify_api.js?v=77a22174:7378:51) at get3 (http://localhost:3000/node_modules/.vite/deps/aws-amplify_api.js?v=77a22174:7404:32) at get4 (http://localhost:3000/node_modules/.vite/deps/aws-amplify_api.js?v=77a22174:7412:23) at getFcn (http://localhost:3000/src/worker1.js?type=module&worker_file:8:31) at http://localhost:3000/src/worker1.js?type=module&worker_file:18:1

</details>


### aws-exports.js

amplifyconfiguration.json:

{
"aws_project_region": "us-east-1",
"aws_cognito_identity_pool_id": "us-east-1:0598a33f-9357-4ba8-9cb2-876da7c9bb85",
"aws_cognito_region": "us-east-1",
"aws_user_pools_id": "us-east-1_JAAkzlaKS",
"aws_user_pools_web_client_id": "27s2qe07qgpp0mf7083dian9ua",
"oauth": {
"domain": "sandboxauth167bef521-67bef521-dev.auth.us-east-1.amazoncognito.com",
"scope": [
"phone",
"email",
"openid",
"profile",
"aws.cognito.signin.user.admin"
],
"redirectSignIn": "http://localhost:3000/",
"redirectSignOut": "http://localhost:3000/",
"responseType": "code"
},
"federationTarget": "COGNITO_USER_POOLS",
"aws_cognito_username_attributes": [
"EMAIL"
],
"aws_cognito_social_providers": [
"GOOGLE"
],
"aws_cognito_signup_attributes": [
"EMAIL"
],
"aws_cognito_mfa_configuration": "OFF",
"aws_cognito_mfa_types": [
"SMS"
],
"aws_cognito_password_protection_settings": {
"passwordPolicyMinLength": 8,
"passwordPolicyCharacters": []
},
"aws_cognito_verification_mechanisms": [
"EMAIL"
],
"aws_cloud_logic_custom": [
{
"name": "sandbox1",
"endpoint": "https://n66fgb5l98.execute-api.us-east-1.amazonaws.com/dev",
"region": "us-east-1"
}
]
}

### Manual configuration

_No response_

### Additional configuration

_No response_

### Mobile Device

_No response_

### Mobile Operating System

_No response_

### Mobile Browser

_No response_

### Mobile Browser Version

_No response_

### Additional information and screenshots

_No response_

[cwomack]

Thanks for creating this issue from the Discord Office Hours session today, @alex-breen. Can you clarify how you're initializing Amplify within the web worker or if it's being imported? And based on the error that you're seeing, can you double check that the API names in the web worker exactly match what's in your config (i.e. casing/spelling)?

[alex-breen]

• I am importing 'aws-amplify/api'. Like this; import { get } from "aws-amplify/api";
• The API names are the same. I copied the same code from the main thread component, where the call works.

Side note - I (clumsily) tried a few different things with the web worker to try to make it work. I imported a window polyfill - no change. I called Amplify.configure(amplifyconfig) inside the webworker - I no longer got the invalidAPIName error, but instead got errors about not having authentication credentials. I added authCode into the options field - but I still got errors about missing creds.

[cwomack]

Ok, thanks for the quick response and glad to hear we’re past the original error then at least! It sounds like what’s happening here is you’ve got some type of network requests needing authenticated credentials happening in the web worker. Can you maybe share some additional context here about what you’re trying to do with the web worker?

If you’re trying to offload some of the work to the web worker, you may want to make any networks requests within the main thread but then hand off the response and other work to the web worker after it’s been received for additional processing. If you’re trying to do all this work in the web worker, that error seems like it’ll require you passing credentials into the other thread and require you writing your own credential and token providers (which we wouldn’t recommend).

[alex-breen]

Thanks @cwomack, that's helpful.

Here is the context about why I'm using a web worker:

• I use a web worker to run a machine learning transformer that would block the main thread if it weren't separated.
• After the transformer is done, the worker makes a post to a Lamda function (using the API path set up using Amplify CLI).
• When the Lambda is done, it returns a result to the web worker. After some processing, the web worker passes a result back to the main thread.

So, as an alternate method, if I can't invoke the get call from the web worker, I can pass the result back to the main thread and make the post to the API/Lambda from there (like you suggested, just in reverse). The reason I wanted to avoid doing that is so I didn't have to pass large payloads of data between the worker and the main thread. And just to keep the logic in one place.

[cwomack]

@alex-breen, we're going to mark this as a feature request at this point to track better support out of the box for web workers. Appreciate you giving the additional context and use cases here.

[blipps199]

I'm curious if there is any solution to this. I'm having a similar issue where I'm simply trying to make a get request using import { get } from 'aws-amplify/api'; and I get the same error that InvalidApiName: API name is invalid. The API name I'm using is correct. I can get the job done using Axios but I was hoping to stick with the Amplify way of things.

const apiName = 'ExampleAPIName';
const path = '/dev';

const restOperation = await get({
  apiName,
  path,
});

[cwomack]

@blipps199, are you calling Amplify.configure() within the web worker so that it has access to the proper API names (see @alex-breen's comment here) above. And are you able to call any Auth API's within the web worker due to the necessity to have a user with proper credentials for the Storage API's.

[blipps199]

@cwomack To be quite honest, I'm not familiar with web workers. I never set one up. Essentially, I started a new Amplify Gen 2 project using the quickstart guide for react seen here. I would love to use import { get } from "aws-amplify/api"; instead of Axios but I get the error about the API name being invalid.

[cwomack]

@blipps199, thanks for the quick reply. We might have you open up a new Github issue detailing what you're experiencing in more detail, but before that let me see if we can diagnose this further in another reply.

If you've already created the Amplify app from the Quickstart guide for React that you linked, did you also follow the instructions for setting up the REST API here? You'll need to create a new directory and resource file as well as import defineFunction in it.

Let me know if that helps you get it set up, or feel free to reply back/open a new issue if not!

[blipps199]

@cwomack Hey, thanks for the reply. Yes, I used that guide in the creation of the API and function. This might be obvious to the trained eye but not necessarily to me but I'm using an assumed role on a separate AWS account to do work for a client. In other words I do not have a user so I cannot use ampx commands and what not. Do you think this might have something to do with this? Hopefully I'm on to something and not sounding silly.

[cwomack]

@blipps199, appreciate the additional clarity here and quick reply! It sounds like the AWS Account that you're working with may not have the necessary permissions for the AmplifyBackendDeployFullAccess policy (see here). If your work account that you're using doesn't allow for this policy to be applied to a role you have access to, you may need to create a different, personal account and can still try Amplify within the free tiers as much as you'd like until ready for production apps.

Do you know if you can create this policy or if you're able to call Amplify.configure() in your app to supply it with the proper credentials?

[blipps199]

@cwomack I was able to get creds and can use ampx commands now. I was able to solve one issue by doing this and that was fetching lambda env variables(not a concern here just for context). However, I'm still getting the error regarding the API name being invalid. The output file, amplify_ouputs.json, is updated and I have full admin access so perms shouldn't be an issue. Also, Amplify,configure() is called with the outputs file included and I still get the error. At this point I'm not sure what else to do.

[blipps199]

@cwomack I decided to pivot to using a GraphQL API instead of rest. I probably should have done this from the beginning. This simplified things greatly and I no longer need to use get. I do appreciate your help with trying to figure this out!