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

Posted 2023-03-08

【中文标题】遵循中继分步指南时出现 AST 节点错误

【英文标题】：AST Node error when following Relay Step by step guide

【发布时间】：2021-12-15 15:22:34

【问题描述】：

我正在遵循 Relay Doc 的分步指南，但在第 5 步之后尝试yarn start 时遇到 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 文件夹中的中继编译器并使用它的全局安装版本解决了问题时才会出现此错误

【问题讨论】：

请以文字形式发布错误消息，而不是绘画链接。并在您问题的引用行中包含代码。

对不起，我已经更新了问题

【参考方案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