reactjsgraphqlaws-amplifyaws-appsyncamplifyjs

Amplify.configure() not being called prior to generateClient()


I am trying to build a react project with AWS app sync and cognito, i have already created cognito user pool & app sync configured perfectly, now on react project , i'm using amplify 6x version

I'm getting this console error -

GraphQLAPI resolveConfig - The API configuration is missing. This is likely due to Amplify.configure() not being called prior to generateClient().

This is how my app.js looks like

import React, { useEffect, useState } from 'react'
import { withAuthenticator, Button, Heading } from '@aws-amplify/ui-react';
import { GET_ALL_ITEMS } from './graphql/queries';
import '@aws-amplify/ui-react/styles.css';
import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';
import { generateClient } from 'aws-amplify/api';


Amplify.configure(awsconfig);

const client = generateClient();




function App({signOut, user}) {
  
      console.log('client', client);
  
      const [error, setError] = useState('');
      const [isLoading, setIsLoading] = useState(false);
      const [todos, setTodos] = useState([]);

      useEffect(() => {
        fetchTodos();
      }, []);
    
      const fetchTodos = async () => {
        setIsLoading(true);
        setError(null);
        try {
          const { data } = await client.graphql({
            query: GET_ALL_ITEMS
          });

          console.log('data',data);
    
          if (data.getAllItems.success) {
            setTodos(data.getAllItems.data);
          } else {
            setError(data.getAllItems.error || 'Failed to fetch todos');
          }
        } catch (err) {
          setError(err.message);
        } finally {
          setIsLoading(false);
        }
      };


  return (
    <div>
          <Heading level={1}>Hello {user.username}</Heading>
        <Button onClick={signOut}>Sign Out</Button>
        
        {error && <p>{error}</p>}
        {isLoading && <p>Loading...</p>}
        {/* <ul>
            {todos.map(todo => (
            <li key={todo.id}>{todo.title}</li>
            ))}
        </ul> */}
    </div>
  )
}

export default withAuthenticator(App);

and this is what my aws-export looks like -

const awsmobile = {
  "API": {
    "GraphQL": {
        "endpoint": "https://xxxxxxxxxx.appsync-api.ap-south-1.amazonaws.com/graphql",
        "region": "ap-south-1",
        "defaultAuthMode": "userPool",
    }
  },  
  "aws_project_region": "ap-south-1",
    "aws_cognito_identity_pool_id": "ap-south-1:xxxxxxx-71b006df2b9d",
    "aws_cognito_region": "ap-south-1",
    "aws_user_pools_id": "ap-south-1_xxxxxx",
    "aws_user_pools_web_client_id": "xxxxxxxxx",
    "oauth": {},
    "aws_cognito_username_attributes": [
        "EMAIL"
    ],
    "aws_cognito_social_providers": [],
    "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"
    ]
};


export default awsmobile;

The auth is perfectly working, but when I try to query graphql, I get the warning and and query/mutation does not get triggered


Solution

  • I guess it is an issue with the awsmobile config object, can you try adding the following keys?

     "aws_appsync_graphqlEndpoint": "https://your.appsync-api.ap-south-1.amazonaws.com/graphql",
      "aws_appsync_region": "ap-south-1",
      "aws_appsync_authenticationType": "AMAZON_COGNITO_USER_POOLS"