javascript - 中继编译Relay Modern代码时变量不在范围错误

原文 标签 javascript reactjs relayjs relaymodern react-relay

我有以下简单的Relay Modern代码:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import {
    QueryRenderer,
    graphql
} from 'react-relay'


import environment from '../../../../../environment'

const CompanyItemQuery = graphql`

query CompanyItem_Query {
  node(id: $companyId) {
    id
    ...on Company {
      id
      name
    }
 }
}
`

class CompanyItem extends Component {

    render() {

        return (
                <QueryRenderer
                    environment={environment}
                    query={CompanyItemQuery}
                    variables={{
                        companyId: 'test',
                    }}
                    render={({error, props}) => {
                        <div>
                            <p>Relay loaded {props.name} company</p>
                        </div>
                }}
                />
        );
    }
};

export default CompanyItem;


我试图在运行之前中继编译代码,但遇到以下错误:

> relay-compiler --src ./src --schema ./src/data/schema.graphql

HINT: pass --watch to keep watching for changes.
Parsed default in 0.08s

Writing default
Invariant Violation: RelayApplyFragmentArgumentTransform: variable `companyId` is not in scope.
    at invariant (D:\DEV\WORKSPACE\client\node_modules\fbjs\lib\invariant.js:44:15)
    at transformValue (D:\DEV\WORKSPACE\client\node_modules\relay-compiler\bin\relay-compiler:4505:28)
    at D:\DEV\WORKSPACE\client\node_modules\relay-compiler\bin\relay-compiler:4497:18
    at Array.map (native)
    at transformArguments (D:\DEV\WORKSPACE\client\node_modules\relay-compiler\bin\relay-compiler:4496:16)
    at transformField (D:\DEV\WORKSPACE\client\node_modules\relay-compiler\bin\relay-compiler:4417:15)
    at D:\DEV\WORKSPACE\client\node_modules\relay-compiler\bin\relay-compiler:4476:24
    at Array.forEach (native)
    at transformSelections (D:\DEV\WORKSPACE\client\node_modules\relay-compiler\bin\relay-compiler:4461:15)
    at transformNode (D:\DEV\WORKSPACE\client\node_modules\relay-compiler\bin\relay-compiler:4385:21)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "relay"
npm ERR! node v6.9.2
npm ERR! npm  v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! mom-client@3.0.0 relay: `relay-compiler --src ./src --schema ./src/data/schema.graphql`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the mom-client@3.0.0 relay script 'relay-compiler --src ./src --schema ./src/data/schema.graphql'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the mom-client package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     relay-compiler --src ./src --schema ./src/data/schema.graphql
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs mom-client
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls mom-client
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     D:\DEV\WORKSPACE\client\npm-debug.log


我找不到变量companyId不在范围内的原因,正如文档中所述,它是在variablesQueryRenderer部分中定义的。

如果我对id使用固定值(例如node id: "Company:59b2cda12504b914cc398100"),则代码将进行中继编译,并且可以正常获取数据。当我需要动态选择ID时会出现问题。

最佳答案

看来您错过了在查询名称中声明变量(和类型)的原因-如下所示:

query CompanyItem_Query($companyId: ID!) {


代替这个:

query CompanyItem_Query {


您可以在中继站点上的示例中看到更多上下文-
 https://facebook.github.io/relay/docs/query-renderer.html

关于javascript - 中继编译Relay Modern代码时变量不在范围错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46186904/

相关文章:

reactjs - Relay + React的测试策略

javascript - 来自其他文件的引用变量尚未加载时,javascript为何不会崩溃

javascript - jQuery命名空间并使用“this”

reactjs - Material-UI Accordion(以前称为 ExpansionTable)组件不会导入

javascript - react :单击文本,动态添加表单并使用它来重命名文本

facebook - 在中继项目中分离React组件

javascript - 无法从Github的GraphQL渲染嵌套 Prop

javascript - 在Angular Radio按钮中将单个ng模型绑定(bind)为2 ng-repeat

javascript - 如何增强迭代回调的JavaScript函数?

javascript - 当用户导航到其他页面时如何中止待处理的 jquery ajax 请求?