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

Question

在执行 create-react-app 以获得新的反应并运行ning 之后，我按照 Relay 教程开始了。我运行它既在 TypeScript 模式下（从这里：https://github.com/Microsoft/TypeScript-React-Starter）也在正常 JavaScript 模式下，最初得到相同的结果。

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

Either the Babel transform was not set up, or it failed to identify this call site. Make sure it is being used verbatim as graphql

我怀疑 Babel 根本就不是运行ning，但我不确定这是否完全正确。我遵循了这个：https://hackernoon.com/using-create-react-app-with-relay-modern-989c078fa892 看看这是否有助于让我的 babel 在我的新 create-react-app + 中继应用程序中执行，但没有成功。我什至从 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;

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

Answer 1

我运行在同一教程中解决了这个问题。基本上，这是一个 Babel 配置问题。有一些方法可以跳过障碍，让它与 create react app 一起工作，但最简单的方法是弹出应用程序并执行以下步骤：

运行 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 运行正确，您就不会再看到您看到的错误。

Answer 2

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

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

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

Answer 3

React Native

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

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

导入 graphql 标签

不要忘记添加插件：['macros'] 到您的 babel 配置。使用包 babel-plugin-macros 来避免节点加密错误。

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

React/Relay Modern/GraphQL Simple Project Setup with Babel Issues

reactjs

typescript

graphql

relay

relaymodern