reactjs - React/Relay Modern/GraphQL Enkel projektuppsättning med Babel-problem

Jag följde Relay-handledningen för att komma igång efter att ha gjort create-react-app för att få igång en ny React. Jag körde det både i TypeScript-läge (från här: https://github.com/Microsoft/TypeScript-React-Starter) och också i normalt JavaScript-läge och kom till samma resultat initialt.

Det här är felet jag får när jag försöker köra appen:

Antingen var Babel-transformeringen inte inställd, eller så kunde den inte identifiera denna anropsplats. Se till att den används ordagrant som graphql

Min misstanke är att Babel helt enkelt inte kördes alls, men jag är inte säker på om det är helt sant. Jag följde detta: https://hackernoon.com/using-create-react-app-with-relay-modern-989c078fa892 för att se om det skulle hjälpa att få min babel att köras inom min nya create-react-app + relay-app, men utan framgång. Jag till och med ejectionade appen från create-react-app och modifierade webpack för att få den att fungera. Nedan är de filer som jag tror är relevanta. Jag har gjort en massa sökningar om detta ämne utan framgång och kan inte hitta ett exempel som använder 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 (eller 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;

Vänligen låt mig veta om fler filer eller information skulle vara till hjälp. Jag skulle verkligen uppskatta all vägledning jag kan få. Tack!

Svar #1

Jag stötte på precis samma problem i samma handledning. I princip är detta ett Babel-konfigurationsproblem. Det finns sätt att ta sig runt för att få detta att fungera med create react app, men det enklaste sättet är att bara ejecta appen och göra följande steg:

Kör react-scripts eject (se till att react-scripts är installerat globalt)

Justera din Webpack-konfiguration för att inkludera 'babel-loader':

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

Lägg till .babelrc i ditt projekts rotkatalog:

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

Installera babel-core, babel-preset-env och babel-loader som utvecklingsberoenden i ditt projekt.

När Babel körs korrekt bör du inte längre få det fel som du ser.

Svar #2

I fallet med create-react-app kan du undvika att behöva ejecta genom att installera babel-plugin-relay/macro och göra så här:

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

Istället för att importera graphql-taggen från react-relay.