遵循 Relay 分步指南时出现 AST 节点错误

Question

我正在按照 Relay Doc 的 Step by step guid 进行操作，但是在尝试 yarn start 第 5 步之后遇到 AST 节点错误，有人知道问题出在哪里吗？

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.

代码：

// 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;

环境：WSL2 Ubuntu

请从the step by step guide at Relay doc

中找到代码

编辑：我发现只有当我尝试使用安装在项目 node_modules 文件夹中的中继编译器并使用它的全局安装版本解决了问题时才会出现此错误

Answer 1

按照分步指南，通过运行步骤 4 的以下命令之一，安装 graphql 版本 16.0.1：

npm install --save-dev relay-compiler graphql babel-plugin-relay
-- or --
yarn add --dev relay-compiler graphql babel-plugin-relay

但是，relay-compiler 具有 graphql 版本 15 (^15.0.0) 的对等依赖性。因此，要修复错误，请将命令替换为：

npm install --save-dev relay-compiler graphql@^15.0.0 babel-plugin-relay
-- or --
yarn add --dev relay-compiler graphql@^15.0.0 babel-plugin-relay

相关 GitHub 问题：https://github.com/facebook/relay/issues/3622

遵循 Relay 分步指南时出现 AST 节点错误

AST Node error when following Relay Step by step guide

javascript

reactjs

relayjs