带有 Babel 问题的 React/Relay Modern/GraphQL 简单项目设置

Posted 2023-03-08

【中文标题】带有 Babel 问题的 React/Relay Modern/GraphQL 简单项目设置

【英文标题】：React/Relay Modern/GraphQL Simple Project Setup with Babel Issues

【发布时间】：2018-08-28 12:14:16

【问题描述】：

在执行 create-react-app 以启动和运行新的 react 之后，我遵循了 Relay 入门教程。我在 TypeScript 模式（来自这里：https://github.com/Microsoft/TypeScript-React-Starter）和普通 javascript 模式下都运行它，最初得到了相同的结果。

这是我在尝试运行应用程序时遇到的错误：

要么未设置 Babel 转换，要么无法识别 这个呼叫站点。确保它被逐字用作graphql

我怀疑 Babel 根本没有运行，但我不确定这是否完全正确。我跟着这个：https://hackernoon.com/using-create-react-app-with-relay-modern-989c078fa892 看看这是否有助于让我的 babel 在我的新 create-react-app + relay 应用程序中执行，但没有运气。我什至从 create-react-app 中退出了该应用程序并修改了 webpack 以使其正常工作。以下是我认为的相关文件。我在这个主题上进行了大量搜索，但没有这样的运气，也找不到使用 React + Relay Modern + Graphql 的示例。

package.json

  "name": "testProj",
  "version": "0.1.0",
  "private": true,
  "metadata": 
    "graphql": 
      "schema": "./graphql/testProj.json"
    
  ,
  "dependencies": 
    "@babel/polyfill": "^7.0.0-beta.42",
    "@babel/runtime": "^7.0.0-beta.42",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-relay": "^1.5.0",
    "react-scripts-ts": "2.14.0",
    "relay-runtime": "^1.5.0"
  ,
  "scripts": 
    "start": "node ./setup && react-scripts-ts start",
    "build": "node ./setup && react-scripts-ts build",
    "test": "node ./setup && react-scripts-ts test --env=jsdom",
    "relay": "relay-compiler --src ./src --schema graphql/implementato.graphql --extensions ts tsx"
  ,
  "devDependencies": 
    "@babel/register": "^7.0.0-beta.42",
    "@types/jest": "^22.2.0",
    "@types/node": "^9.4.7",
    "@types/react": "^16.0.40",
    "@types/react-dom": "^16.0.4",
    "@types/react-relay": "^1.3.4",
    "babel-plugin-relay": "^1.5.0",
    "babel-plugin-styled-components": "^1.5.1",
    "babel-relay-plugin-loader": "^0.11.0",
    "graphql": "^0.13.2",
    "relay-compiler": "^1.5.0",
    "typescript": "^2.7.2"
  

setup.js

const fs = require('fs');
const path = require('path');

const file = path.resolve('./node_modules/babel-preset-react-app/index.js');
let text = fs.readFileSync(file, 'utf8');

if (!text.includes('babel-plugin-relay')) 
    if (text.includes('const plugins = [')) 
        text = text.replace(
            'const plugins = [',
            "const plugins = [\n  require.resolve('babel-plugin-relay'),",
        );
        fs.writeFileSync(file, text, 'utf8');
     else 
        throw new Error(`Failed to inject babel-plugin-relay.`);
    

App.tsx（或 App.jsx）

import * as React from 'react';
import  QueryRenderer, graphql  from 'react-relay';
import environment from './environment';

const query = graphql`
  query AppQuery
    allAccounts 
      totalCount
    
  `;

class App extends React.Component 
  render() 
    return (
      <QueryRenderer
        environment=environment
        query=query
        variables=
        render=( error, props ) => 
          if (error) 
            return <div>Error!</div>;
          
          if (!props) 
            return <div>Loading...</div>;
          
          return <div>Loaded!</div>;
        
      />
    );
  


export default App;

如果有更多文件或信息有帮助，请告诉我。我真的很感激我能得到的任何方向。谢谢！

【问题讨论】：

您执行的 package.json 中的脚本序列是什么？

yarn relay --watch 在一个终端中，yarn start 在第一个终端完成后在另一个终端中。

yarn relay --watch 是在创建相应的.graphql.js 文件还是什么都不做？

【参考方案1】：

我在同一个教程中遇到了这个确切的问题。基本上，这是一个 Babel 配置问题。有一些方法可以跳过箍让它与创建反应应用程序一起工作，但最简单的方法是弹出应用程序并执行以下步骤：

运行react-scripts eject（确保react-scripts已全局安装）

调整您的 Webpack 配置以包含 'babel-loader'：

    test: /\.jsx$/,
    exclude: /node_modules/,
    loader: 'babel-loader'
,

将.babelrc 添加到项目的根目录：

    "presets": [
        "env"
    ],
    "plugins": [
        "relay"
    ]

在您的项目中安装 babel-core、babel-preset-env 和 babel-loader 作为开发依赖项。

一旦 Babel 正常运行，您应该不会再收到您所看到的错误。

【讨论】：

是的，这似乎奏效了。我希望有一个不需要弹出 create-react-app 的解决方案。

【参考方案2】：

如果是create-react-app，您可以通过安装babel-plugin-relay/macro 并执行以下操作来避免弹出：

import graphql from "babel-plugin-relay/macro";

而不是从react-relay 导入graphql 标签。

【参考方案3】：

反应原生

在 create-react-app 的情况下，您可以通过安装 babel-plugin-relay/macro 并执行以下操作来避免弹出：

从“babel-plugin-relay/macro”导入 graphql； 而不是从 react-relay 导入 graphql 标签。

不要忘记将 plugins: ['macros'] 添加到您的 babel 配置中。使用包babel-plugin-macros 避免节点加密错误。