Variable is not in scope error when relay-compiling Relay Modern code

0 votes
asked Sep 13, 2017 by mendes

I´have the following simple Relay Modern code:

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;

I´m trying to relay-compile the code before running and I´m getting the following error:

> 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

I can´t find out why my variable companyId is not in scope, as it is defined in the variables section of the QueryRenderer as stated in the documentation.

If I use a fixed value for id (example node id: "Company:59b2cda12504b914cc398100") code is relay-compiled and I can get my data fetched normally. The problem arises when I need to choose the id dynamically.

Help appreciated to solve this problem.

1 Answer

+5 votes
answered Mar 5, 2018 by jdennis

It looks like you missed declaring the variable (and type) in the query name - so this:

query CompanyItem_Query($companyId: ID!) {

instead of this:

query CompanyItem_Query {

You can see more context in the example on the relay site - https://facebook.github.io/relay/docs/query-renderer.html

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...