中继JS异常:请求应具有有效的`id`或`cacheID`属性

Question

在尝试执行中继查询时，我遇到了一个奇怪的问题：

browser.js:38 Uncaught Invariant Violation: getRequestIdentifier: Expected request `ApplicationQuery` to have either a valid `id` or `cacheID` property
    at invariant (webpack:///./node_modules/invariant/browser.js?:38:15)
    at getRequestIdentifier (webpack:///./node_modules/relay-runtime/lib/util/getRequestIdentifier.js?:23:34)
    at createRequestDescriptor (webpack:///./node_modules/relay-runtime/lib/store/RelayModernOperationDescriptor.js?:58:17)
    at Object.createOperationDescriptor (webpack:///./node_modules/relay-runtime/lib/store/RelayModernOperationDescriptor.js?:37:27)
    at Object.createOperation (webpack:///./node_modules/relay-hooks/lib/Utils.js?:24:26)
    at Object.getOrCreateQueryFetcher (webpack:///./node_modules/relay-hooks/lib/QueryFetcher.js?:17:23)
    at useInternalQuery (webpack:///./node_modules/relay-hooks/lib/useQuery.js?:24:36)
    at exports.useLazyLoadQuery (webpack:///./node_modules/relay-hooks/lib/useQuery.js?:64:10)
    at Application (webpack:///./client/src/Application.js?:25:95)
    at renderWithHooks (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:14803:18)

我能够追踪到这个bug到这个函数relay-runtime：https://github.com/facebook/relay/blob/master/packages/relay-runtime/util/getRequestIdentifier.js#L27-L40

看起来它希望我的请求有一个cacheID或id，但由于某种原因，我的请求没有。当我注释掉这一行时，它工作得很好。

下面是我的实际中继调用站点的样子

const userAccessQuery = graphql`
  query ApplicationQuery($accessToken: String) {
    accessTokenUser(accessToken: $accessToken) {
      id
      firstName
      lastName
      email
      isInternal
    }
  }
`;

function Application(): Node {
  const { data } = useLazyLoadQuery<ApplicationQuery>(
    userAccessQuery,
    { accessToken: AuthUtil.getAccessToken() },
  );

  
  ...

}

我最初的想法是，也许我的一些中继软件包是不兼容的。下面是我的package.json依赖项：

  "devDependencies": {
    "@babel/core": "^7.13.15",
    "@babel/node": "^7.13.13",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/plugin-transform-runtime": "^7.13.15",
    "@babel/preset-env": "^7.13.15",
    "@babel/preset-flow": "^7.13.13",
    "@babel/preset-react": "^7.13.13",
    "@babel/runtime": "^7.13.10",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "css-loader": "^3.6.0",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-import-resolver-webpack": "^0.12.2",
    "eslint-plugin-flowtype": "^4.7.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^2.5.1",
    "file-loader": "^6.2.0",
    "flow": "^0.2.3",
    "flow-bin": "^0.117.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.14.1",
    "nodemon": "^2.0.7",
    "pre-commit": "^1.2.2",
    "relay-compiler": "^11.0.2",
    "relay-config": "^11.0.2",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.3.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "babel-plugin-relay": "^11.0.2",
    "babel-runtime": "^6.26.0",
    "bcrypt": "^4.0.1",
    "body-parser": "^1.19.0",
    "classnames": "^2.3.1",
    "cors": "^2.8.5",
    "debug": "^4.3.1",
    "dotenv": "^8.2.0",
    "email-validator": "^2.0.4",
    "es6-promisify": "^6.1.1",
    "esm": "^3.2.25",
    "express": "^4.17.1",
    "express-graphql": "^0.9.0",
    "form-serialize": "^0.7.2",
    "gql-merge": "0.0.6",
    "graphql": "^14.7.0",
    "jws": "^4.0.0",
    "lodash": "^4.17.21",
    "mysql": "^2.18.1",
    "mysql2": "^2.2.5",
    "nullthrows": "^1.1.1",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-relay": "^11.0.2",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "reflect-metadata": "^0.1.13",
    "relay-hooks": "^4.2.0",
    "sequelize": "^6.6.2"
  }

任何帮助都将不胜感激。谢谢!

Answer 1

我终于能够解决这个问题了--这是因为我是从'relay-hooks‘而不是'react-relay/hooks’导入的。