GraphQL resolveConfig: The API configuration is missing

[dense nacelle]

Hello,

This is a question that was brought up in office hours on 1/18: @hardy wadi @dusky robin

I am currently trying to connect my front-end to its backend DB. I configured the DB in amplify-cli, and can access it through the studio. However, when I try to add to my DB programatically I'm getting the errors listed below.

I am following this tutorial for connecting the backend to the front end: https://docs.amplify.aws/react/build-a-backend/graphqlapi/connect-to-api/

I call Amplify.configure() in my index.js file before anything else is done:

// Amplify setup
import { Amplify } from 'aws-amplify';
import config from './aws-exports';

console.log(config)

Amplify.configure(config);

The console.log(config) call returns the expected output in the console. This is what my config file actually looks like with sensitive info blocked out (I got the graphQL endpoint and API key from the aws appsync console associated with the API):

aws-export.js:

/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    API: {
        GraphQL: {
          endpoint: '***',
          region: 'us-east-2',
          defaultAuthMode: 'apiKey',
          apiKey: '***'
        }
    },
    ...
};

export default awsmobile;

To call the API I have a button tied to this createApp() function:

import { generateClient } from 'aws-amplify/api';
import { createApplication } from '../graphql/mutations';

const client = generateClient();

async function createApp() {
  const todo = { name: 'My first todo', description: 'Hello world!' };

  /* create a todo */
  await client.graphql({
    query: createApplication,
    variables: {
      input: todo
    }
  });
}

When the createApp is called I get this error:

ERROR
[object Object]
    at handleError 

And the image I linked it the message I see in my console:

Any help would be appreciated!

[dusky robin]

Hey, @dense nacelle! Wanted to follow up on this from Discord Office Hours and see if we can't get you unblocked. From what I understand, it appears that Amplify.configure() and generateClient() are called in different files in your app.

Separating them might create issues where generateClient() is called before Amplify has been fully configured in React. Can you see if refactoring your code to have Amplify.configure() called immediately before generateClient() in the same file (index.js) helps resolve the issue?

import { Amplify } from 'aws-amplify';
import config from './aws-exports';
import { generateClient } from 'aws-amplify/api';

Amplify.configure(config);

const client = generateClient();

[dense nacelle]

Hi when I tried this and passed the client into my components I got the same error