Cannot use aws-appsync for Cognito auth with CRA

[samscarsella]

Note: If your issue/feature-request/question is regarding the AWS AppSync service, please log it in the official AWS AppSync forum

Do you want to request a feature or report a bug? Bug

What is the current behavior? Following the instructions for using Cognito Auth breaks Create React App, throwing several errors similar to `ERROR in ./node_modules/graphql/index.mjs 25:0-49

Module not found: Error: Can't resolve './version' in 'C:\Users...\node_modules\graphql' Did you mean 'version.mjs'? BREAKING CHANGE: The request './version' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.`

I tried npm install graphql, and got further errors: `ERROR in ./node_modules/apollo-cache-inmemory/lib/queryKeyMaker.js 137:12-29

export 'QueryDocumentKeys' (imported as 'QueryDocumentKeys') was not found in 'graphql/language/visitor' (possible exports: BREAK, getEnterLeaveForKind, getVisitFn, visit, visitInParallel)`

Seems like a dependency issue? Previously I had API Key auth working, but need to switch to Cognito User Pools.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. https://docs.amplify.aws/lib/graphqlapi/authz/q/platform/js/#cognito-user-pools

What is the expected behavior? Using aws-appsync shouldn't break CRA

Which versions and which environment (browser, react-native, nodejs) / OS are affected by this issue? Did this work in previous versions? @aws-amplify/ui-react: ^2.15.3, aws-amplify: ^4.3.20, aws-appsync: ^4.1.5, react: 16.14.0, react-dom: 16.14.0,

[josefaidt]

Hey @samscarsella :wave: when using AppSync GraphQL API's with Amplify it is recommended to use the API module from aws-amplify to make our GraphQL calls

import { API, Auth } from 'aws-amplify'
import { GRAPHQL_AUTH_MODE } from '@aws-amplify/api'
import * as mutations from '../graphql/mutations'

async function createPost(input) {
  const result = await API.graphql({
    query: mutations.createPost,
    variables: { input },
    authMode: GRAPHQL_AUTH_MODE.AMAZON_COGNITO_USER_POOLS, // if Cognito User Pools is our default auth mechanism this override is unnecessary
    authToken: (await Auth.currentSession()).getIdToken().getJwtToken(),
  })
  return result.data.createPost.id
}

[iartemiev]

Closing due to inactivity