Relay: graphql: unexpected invocation at runtime. either the babel transform was not setup or it failed to identify this call site. Make sure it is being used verbatim as 'graphql'

[jalalat]

I am trying to use Relay Modern with react native. I am getting the error:

graphql: unexpected invocation at runtime. either the babel transform was not setup or it failed to identify this call site. Make sure it is being used verbatim as 'graphql'

.babelrc:

{
  "passPerPreset": true,
  "plugins": [
    [
      "relay", {
        "schema": "server/schema/schema.graphql"
      }
    ],
    "transform-runtime"
  ],
  "presets": [
    "react-native",
    "react-native-stage-0/decorator-support",
    "react",
    "es2015",
    "stage-0"
  ]
}

my package.json

{
  "name": "bakbak-relay-rn",
  "version": "0.1.0",
  "private": true,
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "server": "babel-node ./server/server.js",
    "build": "relay-compiler --src ./client/ --schema ./server/schema/schema.graphql",
    "update-schema": "babel-node ./server/updateSchema.js",
    "lint": "eslint ./js",
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "node node_modules/jest/bin/jest.js --watch"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.5",
    "babel-plugin-relay": "^1.0.1-a",
    "babel-plugin-transform-runtime": "^6.12.0",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "babel-preset-react-native-stage-0": "^1.0.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-runtime": "^6.11.6",
    "classnames": "2.2.5",
    "cors": "^2.8.3",
    "expo": "^17.0.0",
    "express": "^4.15.2",
    "express-graphql": "^0.6.4",
    "graphql": "^0.9.1",
    "graphql-relay": "^0.5.1",
    "isomorphic-fetch": "^2.2.1",
    "prop-types": "^15.5.8",
    "react": "16.0.0-alpha.6",
    "react-dom": "^15.3.1",
    "react-native": "^0.44.0",
    "react-relay": "^1.0.0-a",
    "todomvc-app-css": "^2.1.0",
    "todomvc-common": "^1.0.3",
    "webpack": "1.13.2",
    "webpack-dev-server": "^1.16.1",
    "whatwg-fetch": "2.0.3"
  },
  "devDependencies": {
    "babel-cli": "^6.11.4",
    "babel-eslint": "6.1.2",
    "eslint": "3.19.0",
    "eslint-config-fbjs": "1.1.1",
    "eslint-plugin-babel": "3.3.0",
    "eslint-plugin-flowtype": "2.15.0",
    "eslint-plugin-react": "5.2.2",
    "jest-expo": "~1.0.1",
    "react-native-scripts": "0.0.31",
    "react-test-renderer": "16.0.0-alpha.6",
    "relay-compiler": "^1.0.0-a"
  }
}

Should i try something that is metioned on some old threads like:
https://github.com/graphcool/babel-plugin-react-relay/issues/2
https://github.com/facebook/relay/issues/206#issuecomment-138186103

I just could not understand about this solution at all:
https://github.com/facebook/relay/issues/1621

Please help.

[leebyron]

Perhaps include a sample of your code, especially the lines contained within the stack trace?

Specifically I'm curious if the Make sure it is being used verbatim as 'graphql' part of the error applies to your use case. That is, the relay babel plugin looks for:

graphql` ... `

And not:

MyRelayImport.graphql` ... `

Does this help?

[leebyron]

Closing this issue, but please re-open or continue discussion if necessary

[hisapy]

I'm having this same issue when trying to run snapshot tests with Jest, using in my component:

graphql` ... `

I tried installing babel-jest with no success

[satishrao84]

Any updates to this issue? I am facing the same problem.

[carlows]

Same problem, this is my .babelrc

{
  "passPerPreset": true,
  "plugins": [
    "relay",
    "transform-runtime"
  ],
  "presets": [
    "react",
    "es2015",
    "stage-0"
  ]
}

[MrMuhammadAbdullah1704]

Facing the same issue with graphql...

[G-kodes]

This is still a problem 3 years later. I am also stuck with it now...

[maraisr]

Just to help tell you "why" that error occurs.

when you import graphql from relay-runtime or the other packages. You simply import this function. As you can see that will _always_ throw an exception.

Now you're probably asking, why does it sometimes not throw and work? Well, that is because there is a babel plugin that _replaces_ those import statements with other things. As you can see here.

So if you're seeing that error throw, please do verify that you have been successful in configuring babel.

Now if you think you've still got it configured correctly, but its still broken. May I suggest you pull back some plugins, or presets as sometimes what can happen is the template literal get's transpiled down to a string _before_ Relay's plugin can. You can see that at Babel's Plugin Ordering.

@G-kodes If you can create a small repro repo for me to look at, I can surely help you diagnose the issue.

[G-kodes]

@maraisr , it seems the joke is on me for this one. I have managed to come right. My issue was caused by the fact that I am importing the graphql function directly from react-relay. After doing some reading, I discovered that in my case (A react-relay project created using create-react-app) my setup does have limitations in that I have very little control over my babel setup (A lot of it is preset behind the scenes by the create-react-app, making it extremely difficult to override that and set my own parameters).

The solution which worked for me was to directly import a babel-specific function by the same name from the babel-plugin-relay/macro package directly.

StackOverflow solution available here

Many thanks for your help though. This is all new to me (Python-dev finally taking the deep dive into JavaScript) so your help is much appreciated.

[hoangbits]

Thanks @maraisr
In my case the webpack.config.js have both ts-loader and babel-loader, after get rid of ts-loader and reconfig babel-loader to handle ts|tsx files I was able to bypass this error.