Definitelytyped: Babel Plugin Relay Macro TypeScript

[jedmao]

Hoping this will help TypeScript developers.

npm install --save react-relay babel-plugin-relay
npm install --save-dev @types/react-relay

// src/react-app-env.d.ts
declare module 'babel-plugin-relay/macro' {
    export { graphql } from 'react-relay'
}

// src/components/Foo.tsx
import { graphql } from 'babel-plugin-relay/macro'
import { QueryRenderer } from 'react-relay'

[pjvds]

you saved my day!

[JacekKosciesza]

Didn't work for me when running relay-compiler:

"relay": "yarn run relay-compiler --schema schema.graphql --extensions ts tsx --src ./src/ --watchman false $@"

ERROR:
Parse error: SyntaxError: Only declares and type imports are allowed inside declare module (6:2) in "react-app-env.d.ts"

Ok, solution was to install relay-compiler-language-typescript
yarn add -D relay-compiler-language-typescript
and run relay-compiler like this:
"relay": "yarn run relay-compiler --schema schema.graphql --language typescript --src ./src/ --watchman false $@"

[dzucconi]

For me, had to declare the default export:

import graphql from 'babel-plugin-relay/macro'

declare module "babel-plugin-relay/macro" {
  export { graphql as default } from "react-relay";
}

[jagadeesh93]

@jedmao I had the same bug .I applied this solution it worked fine for me . Could you please explain what is happening behind the scene ? . why it is throwing an error if i directly import from react-relay by skipping the babel-plugin-relay/macro thing

[jedmao]

It’s been too long, so I don’t remember exactly the issue I was facing, but it looks like I was just trying to make sure that there were no type collisions between the two libraries for using different types or different versions of types for graphql. In my code, I’m explaining that the graphql export from the macro is actually the same type information as the graphql export from react-relay.

[walteraandrade]

I love you.