I’m following the Relay Doc’s Step by step guid but is encountering a AST node error when trying to yarn start after Step 5, anyone had any idea what’s the problem?
Writing js
ERROR:
Invalid AST Node: { kind: "Root", operation: "query", loc: { kind:
"Source", start: 3, end: 105, source: [Source] }, metadata: null,
name: "AppRepositoryNameQuery", argumentDefinitions: [],
directives: [], selections: [[Object]], type: Query }.
error Command failed with exit code 100.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation
about this command.
Code:
// your-app-name/src/App.js
import React from 'react';
import './App.css';
import fetchGraphQL from './fetchGraphQL';
const { useState, useEffect } = React;
function App() {
// We'll load the name of a repository, initially setting it to null
const [name, setName] = useState(null);
// When the component mounts we'll fetch a repository name
useEffect(() => {
let isMounted = true;
fetchGraphQL(`
query RepositoryNameQuery {
# feel free to change owner/name here
repository(owner: "facebook" name: "relay") {
name
}
}
`).then(response => {
// Avoid updating state if the component unmounted before the fetch completes
if (!isMounted) {
return;
}
const data = response.data;
setName(data.repository.name);
}).catch(error => {
console.error(error);
});
return () => {
isMounted = false;
};
}, [fetchGraphQL]);
// Render "Loading" until the query completes
return (
<div className="App">
<header className="App-header">
<p>
{name != null ? `Repository: ${name}` : "Loading"}
</p>
</header>
</div>
);
}
export default App;Environment: WSL2 Ubuntu
Please find the code from the step by step guide at Relay doc
Edit: I discovered that this error only occur when I am trying to use the relay-compiler installed in the project’s node_modules folder and using globally installed version of it solved the problem
