profile
viewpoint

Ask questionsgraphql: Unexpected invocation at runtime. 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`

Hello! I'm trying to start a relay project, but after yarn start I see this bug in a browser:

graphql: Unexpected invocation at runtime. 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.

Somewone khow, how to fix this bug?

Here is the repository link: express-react-relay

Thanks for any help!

One of jsx files, that causes the problem:

import React, { Component } from 'react';
import Modal from 'react-modal';

import { createFragmentContainer, graphql } from "react-relay";

const styles = {
  postWrapper: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    border: "1px solid #ccc",
    margin: 10,
    cursor: "pointer"
  },
  closeButton: {
    position: "absolute",
    right: 12,
    top: 10,
    border: 0,
    background: "white",
    fontSize: 25,
    color: "gray"
  }
};

class Post extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false
    };
  }
  render() {
    return (
      <div
        style={styles.postWrapper}
        onClick={() => this.setState({ isOpen: !this.state.isOpen })}
      >
        <h3>{this.props.post.title}</h3>
        <Modal isOpen={this.state.isOpen}>
          <h3>{this.props.post.title}</h3>
          <div>{this.props.post.content}</div>
          <button
            onClick={() => this.setState({ isOpen: false })}
            style={styles.closeButton}
          >
            X
      </button>
        </Modal>

      </div>
    );
  }
}

export default createFragmentContainer(
  Post,
  graphql`
    fragment Post_post on Post {
        id
        title
        content
      }
    `
);
facebook/relay

Answer questions sovello

I think there's a disconnect between graphql doc and react doc. If you set React using npx create-react-app you should import graphql like

import graphql from 'babel-plugin-relay/macro instead of from react-relay. For some reason this worked for me, I didn't dig further for a work around, but what is in the documentation should work if you didn't use npx create-react-app (create-react-app doesn't easily allow custom configuration of babel.)

It maybe worthwhile to put this note explicitly in the Quick start guide for graphql? It is currently mentioned in Installation and setup as something optional.

useful!
source:https://uonfu.com/
Github User Rank List