SolvedDefinitelyTyped Babel Plugin Relay Macro TypeScript

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'
11 Answers

✔️Accepted Answer

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";
}

Other Answers:

you saved my day!

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 $@"

More Issues: