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
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"