search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.4k stars 2.11k forks source link

graphql Object(...) is not a function #9657

Closed xh3087 closed 2 years ago

xh3087 commented 2 years ago

Before opening, please confirm:

JavaScript Framework

React

Amplify APIs

GraphQL API

Amplify Categories

api

Environment information

``` # Put output below this line MacBook Pro (13-inch, 2017, Two Thunderbolt 3 ports) 2.3 GHz 双核Intel Core i5 8 GB 2133 MHz LPDDR3 Intel Iris Plus Graphics 640 1536 MB ```

Describe the bug

aws-amplify@4.1.1 upgrade aws-amplify@4.3.14 aws-appsync@4.0.3 upgrade aws-appsync@4.14

Exception after upgrade: TypeError: Object(...) is not a function at GraphQLAPIClass../node_modules/@aws-amplify/api-graphql/lib-esm/GraphQLAPI.js.GraphQLAPIClass.graphql (http://localhost:3000/static/js/bundle.js:4846:69) at APIClass../node_modules/@aws-amplify/api/lib-esm/API.js.APIClass.graphql (http://localhost:3000/static/js/bundle.js:6151:33) at http://localhost:3000/static/js/bundle.js:575843:54 at Generator.next () at fulfilled (http://localhost:3000/static/js/bundle.js:566404:58)

Expected behavior

No exception after upgrade

Reproduction steps

1.after OnClick 2

截屏2022-02-28 16 57 40

.

Code Snippet

// Put your code below this line.
        // ログインユーザー情報取得
        let responseMe
        try {
          responseMe = await API.graphql(graphqlOperation(QUERY_ME))
        } catch (err) {
          msgErrorHandler(dispatcher, Messages.COMMON_ERROR)
          return false
        }

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

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

{ "name": "testapp", "version": "0.0.1", "scripts": { "change-dev": "sh react-native-change-dev.sh", "start": "cp -rf config/aws/dev/ src/ && node ./bin/react-scripts-ts.js start", "build-dev": "cp -rf config/aws/dev/ src/ && sh build-web.sh && node ./bin/react-scripts-ts.js build", "tsc": "sh react-native-build.sh" }, "dependencies": { "@material-ui/core": "^3.1.1", "@react-native-async-storage/async-storage": "^1.15.5", "@react-native-community/async-storage": "^1.12.1", "@react-native-community/cameraroll": "^4.0.4", "@react-native-community/image-editor": "^2.3.0", "@react-native-community/netinfo": "5.9.4", "@react-native-community/viewpager": "^5.0.11", "@types/node": "^9.6.31", "@types/react": "17.0.14", "@types/react-dom": "17.0.9", "@types/react-native": "0.64.10", "@types/react-redux": "^5.0.14", "@types/react-router-dom": "^4.3.1", "@types/react-router-redux": "^5.0.14", "amazon-cognito-identity-js": "5.0.3", "aws-amplify": "4.3.14", "aws-amplify-react": "^2.0.5", "aws-amplify-react-native": "^2.0.4", "aws-appsync": "4.1.4", "aws-appsync-react": "^1.2.0", "awsmobile-cli": "^1.1.5", "babel": "^6.23.0", "babel-preset-stage-0": "^6.24.1", "clone": "^2.1.2", "date-fns": "2.0.0-beta.1", "global": "^4.3.2", "graphql-tag": "^2.10.0", "morgan": "^1.9.1", "object-assign": "^4.1.1", "push.js": "^1.0.12", "react-apollo": "^2.2.4", "react-app-polyfill": "^2.0.0", "react-ga": "^2.7.0", "react-image-file-resizer": "^0.2.0", "react-native-actionsheet": "^2.4.2", "react-native-autogrow-textinput": "^5.1.1", "react-native-doc-viewer": "^2.7.8", "react-native-document-picker": "^3.4.0", "react-native-drag-sort": "^1.3.4", "react-native-image-resizer": "1.4.5", "react-native-indicators": "^0.15.0", "react-native-material-menu-fix": "^1.5.0", "react-native-modals": "^0.22.3", "react-native-swiper-firstshowlast": "^1.0.0", "react-native-video-controls": "^2.2.3", "react-pdf": "^4.1.0", "react-select": "^2.4.3", "source-map-loader": "^0.2.1", "superagent": "^4.0.0-beta.5" }, "devDependencies": { "@babel/core": "^7.12.9", "@babel/runtime": "^7.12.5", "@react-native-community/eslint-config": "^2.0.0", "@types/jssha": "^2.0.0", "@types/react-native-material-ui": "^1.31.0", "@types/uuid": "^3.4.4", "apollo-cache-redux": "^0.1.2", "apollo-link-state": "^0.4.2", "autoprefixer": "7.1.6", "autoprefixer-loader": "^3.2.0", "awesome-typescript-loader": "^5.2.1", "aws4": "^1.8.0", "aws4-react-native": "^0.0.2", "babel-core": "^6.26.3", "babel-jest": "^26.6.3", "babel-loader": "^7.1.2", "babel-plugin-react-transform": "^3.0.0", "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2", "babel-plugin-transform-object-assign": "^6.22.0", "babel-plugin-transform-runtime": "^6.23.0", "babel-polyfill": "^6.26.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-react-app": "^3.1.1", "case-sensitive-paths-webpack-plugin": "2.1.1", "chalk": "1.1.3", "css-loader": "0.28.7", "dotenv": "4.0.0", "dotenv-expand": "4.2.0", "eslint": "7.14.0", "extract-text-webpack-plugin": "3.0.2", "file-loader": "0.11.2", "file-saver": "^2.0.2", "fork-ts-checker-webpack-plugin": "^0.2.8", "fs-extra": "3.0.1", "geolib": "^3.0.4", "google-map-react": "^1.1.4", "html-webpack-plugin": "2.29.0", "jest": "^26.6.3", "json-loader": "^0.5.7", "jssha": "^2.3.1", "less": "^3.8.1", "less-loader": "^4.1.0", "metro-react-native-babel-preset": "^0.66.2", "postcss-flexbugs-fixes": "3.2.0", "postcss-loader": "2.0.8", "promise": "8.0.1", "raf": "3.4.0", "react": "17.0.2", "react-datepicker": "^2.5.0", "react-detect-offline": "2.3.0", "react-dev-utils": "^5.0.1", "react-dom": "17.0.1", "react-dropzone": "^5.1.0", "react-html-parser": "^2.0.2", "react-image-gallery": "^0.8.18", "react-linkify": "^0.2.2", "react-moment": "^0.8.1", "react-native": "0.67.2", "react-native-action-button": "^2.8.5", "react-native-autocomplete-input": "^3.6.0", "react-native-cli": "^2.0.1", "react-native-easy-toast": "^1.2.0", "react-native-fetch-blob": "^0.10.8", "react-native-hyperlink": "^0.0.14", "react-native-hyperlinked-text": "^1.0.1", "react-native-image-crop-picker": "0.36.2", "react-native-image-picker": "^0.27.1", "react-native-js-stepper": "^0.2.1", "react-native-keyboard-spacer": "^0.4.1", "react-native-loading-spinner-overlay": "^1.0.1", "react-native-maps": "^0.23.0", "react-native-material-menu": "^0.4.2", "react-native-material-ui": "^1.30.1", "react-native-media-meta": "0.0.11", "react-native-modest-checkbox": "^3.3.0", "react-native-paper": "^2.3.0", "react-native-permissions": "^1.1.1", "react-native-photo-view-ex": "^1.1.0", "react-native-popup-dialog": "^0.18.2", "react-native-push-notification": "^7.4.0", "react-native-render-html": "4.1.2", "react-native-router-flux": "4.0.5", "react-native-status-bar-height": "^2.1.0", "react-native-swiper": "^1.5.14", "react-native-thumbnail": "https://github.com/phuochau/react-native-thumbnail.git", "react-native-user-agent": "^1.0.3", "react-native-vector-icons": "6.1.0", "react-native-video": "^4.2.0", "react-native-view-more-text": "^2.0.1", "react-redux": "^5.0.7", "react-router": "^4.3.1", "react-router-dom": "^4.3.1", "react-router-redux": "^4.0.8", "react-scripts-ts": "^2.8.0", "react-spinner-material": "^1.1.1", "react-spinners": "^0.5.4", "react-string-replace": "^0.4.1", "react-test-renderer": "17.0.2", "react-textarea-autosize": "^7.0.4", "react-transform-catch-errors": "^1.0.2", "react-transform-hmr": "^1.0.4", "react-virtualized-select": "^3.1.3", "redbox-react": "^1.6.0", "redux": "^4.0.0", "redux-devtools": "^3.4.1", "redux-devtools-dock-monitor": "^1.1.3", "redux-devtools-log-monitor": "^1.4.0", "redux-localstorage": "^0.4.1", "redux-logger": "^3.0.6", "redux-thunk": "2.1.0", "resolve": "1.6.0", "style-loader": "0.19.0", "sw-precache-webpack-plugin": "0.11.4", "ts-jest": "22.0.1", "ts-loader": "^2.3.7", "tsconfig-paths-webpack-plugin": "^2.0.0", "tslint": "^5.11.0", "tslint-config-prettier": "^1.10.0", "tslint-loader": "^3.6.0", "tslint-react": "^3.2.0", "typescript": "4.3.4", "uglifyjs-webpack-plugin": "^1.1.8", "url-loader": "0.6.2", "webpack": "3.8.1", "webpack-cli": "^3.1.1", "webpack-dev-middleware": "^3.4.0", "webpack-dev-server": "2.9.4", "webpack-hot-middleware": "^2.24.2", "webpack-manifest-plugin": "1.3.2", "whatwg-fetch": "2.0.3" }, "private": true, "jest": { "preset": "react-native" } }

No response

xh3087 commented 2 years ago

import： import { Auth, API, graphqlOperation } from 'aws-amplify'

chrisbonifacio commented 2 years ago

Hi @xh3087 👋 thanks for raising this issue. I might need some more information to reproduce this issue. Was your code snippet working as is before updating amplify package versions?

It looks like you're importing Auth, API, and graphqlOperation as named imports but calling them from an aws_amplify_1 object. This doesn't seem consistent with the imports. Is this intentional?

Also, please share the contents of your package.json file

xh3087 commented 2 years ago

Hi @xh3087 👋 thanks for raising this issue. I might need some more information to reproduce this issue. Was your code snippet working as is before updating amplify package versions?

It can be used normally before the upgrade upgrade： aws-amplify@4.1.1 upgrade aws-amplify@4.3.14 aws-appsync@4.0.3 upgrade aws-appsync@4.14 react@17.01 upgrade react@17.02 react-native@0.64.2 upgrade react-native@0.67.2

It looks like you're importing Auth, API, and graphqlOperation as named imports but calling them from an aws_amplify_1 object. This doesn't seem consistent with the imports. Is this intentional?

orry, what I wrote before was in post-compilation debugging, the real thing should be the TS code: // ログインユーザー情報取得 let responseMe try { responseMe = await API.graphql(graphqlOperation(QUERY_ME)) } catch (err) { // mst_userTable.isInvalid == true || mst_userTable.isSaleStop == trueのユーザーはCognitoステータスも無効になっている msgErrorHandler(dispatcher, Messages.COMMON_ERROR) return false }

Also, please share the contents of your package.json file It has been added: Additional information and screenshots

chrisbonifacio commented 2 years ago

@xh3087 I noticed you have aws-amplify-react installed. That package is no longer being updated and has peer dependencies that might cause conflicts with newer versions of aws-amplify. Can you try removing that package, rebuilding the app, and see if that fixes the issue?

xh3087 commented 2 years ago

@xh3087 I noticed you have aws-amplify-react installed. That package is no longer being updated and has peer dependencies that might cause conflicts with newer versions of aws-amplify. Can you try removing that package, rebuilding the app, and see if that fixes the issue?

Thank you for your answer, but even if I delete a, the same error will still appear. But auth did not report an error:await Auth.signIn(cognitoUserName, pw) Reducing the version can solve the problem（Version 4.3.1 is also normal）. I'm not very experienced in development, so I'll use the old version for the time being. But I still hope to upgrade the version.

xh3087 commented 2 years ago

After testing, the mobile phone is used normally, but the PC can not be used normally.

However, the following files can be used normally by modifying them: node_modules/@aws-amplify/api-graphql/lib-esm/GraphQLAPI.js

  -    import { print, parse, GraphQLError, } from 'graphql';
  +    import { print, parse } from 'graphql/language';
  +    import { GraphQLError, } from 'graphql/error';
chrisbonifacio commented 2 years ago

Hi @xh3087 sorry for the delayed response. I'm not sure if I understand your last comment. Do you mean the code you shared is working on a mobile device but not in a browser from your desktop/laptop? Are you still in need of assistance on this issue?

github-actions[bot] commented 1 year ago

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server amplify-help forum.