# relay-compiler-language-typescript

> A language plugin for Relay that adds TypeScript support, including emitting type definitions.

Latest version **15.0.1** (published 2022-01-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install relay-compiler-language-typescript
pnpm add relay-compiler-language-typescript
yarn add relay-compiler-language-typescript
bun add relay-compiler-language-typescript
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 15.0.1 |
| Published | 2022-01-30 |
| First published | 2018-02-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 162.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 241 |
| Maintainers | kastermester, alloy |
| Keywords | graphql, react, relay, typescript |

## Links

- npm: https://www.npmjs.com/package/relay-compiler-language-typescript
- Repository: https://github.com/relay-tools/relay-compiler-language-typescript
- Issues: https://github.com/relay-tools/relay-compiler-language-typescript/issues
- npm.io page: https://npm.io/package/relay-compiler-language-typescript

## Dependencies (1)

- [invariant](https://npm.io/package/invariant.md) ^2.2.4

## Alternatives

- [apollo-link-http-common](https://npm.io/package/apollo-link-http-common.md) — 879.0K weekly downloads
- [react-relay](https://npm.io/package/react-relay.md) — 336.8K weekly downloads
- [relay-test-utils](https://npm.io/package/relay-test-utils.md) — 181.6K weekly downloads
- [@vendure/core](https://npm.io/package/@vendure/core.md) — 14.8K weekly downloads
- [@pnpm/deps.graph-sequencer](https://npm.io/package/@pnpm/deps.graph-sequencer.md) — 13.4K weekly downloads

## Recent versions

- 15.0.1 (latest) — 2022-01-30
- 15.0.0 — 2021-11-23
- 14.3.0 — 2021-10-29
- 14.2.1 — 2021-10-06
- 14.2.0 — 2021-10-01
- 14.1.3 — 2021-10-01
- 14.1.2 — 2021-09-28
- 14.1.1 — 2021-09-28
- 14.1.0 — 2021-08-08
- 14.0.0 — 2021-04-07
- 13.0.10 — 2021-04-07
- 13.0.9 — 2021-04-02
- 13.0.8 — 2021-04-02
- 13.0.7 — 2021-04-02
- 13.0.6 — 2021-02-15
- … 54 more at https://npm.io/package/relay-compiler-language-typescript/versions

## README

# Obsolete

This is repository is obsolete as [relay@13](https://github.com/facebook/relay/releases/tag/v13.0.0) now supports TypeScript directly.

# relay-compiler-language-typescript

[![Build Status](https://travis-ci.org/relay-tools/relay-compiler-language-typescript.svg?branch=master)](https://travis-ci.org/relay-tools/relay-compiler-language-typescript)

A language plugin for [Relay](https://facebook.github.io/relay/) that adds
TypeScript support, including emitting type definitions.

## Installation

Add the package to your dev dependencies:

```
yarn add graphql relay-compiler --dev
yarn add typescript relay-compiler-language-typescript --dev
```

**Note:** Starting with version 15.0.0 relay-compiler-language-typescript requires a minimum TypeScript version of 4.5.0 being installed in your project.

## Configuration

### relay-compiler

Then configure your `relay-compiler` script to use it, like so:

```json
{
  "scripts": {
    "relay":
      "relay-compiler --src ./src --schema data/schema.graphql --language typescript --artifactDirectory ./src/__generated__"
  }
}
```

This is going to store all artifacts in a single directory, which you also need
to instruct `babel-plugin-relay` to use in your `.babelrc`:

```json
{
  "plugins": [["relay", { "artifactDirectory": "./src/__generated__" }]]
}
```

### TypeScript

Also be sure to configure the TypeScript compiler to transpile to `ES2015`
modules (or higher) and leave transpilation to `CommonJS` modules (if required)
up to Babel with the following `tsconfig.json` settings:

```json5
{
  "compilerOptions": {
    "module": "ES2015", // ES2015 or higher
    "target": "ES2020"  // best use the highest target setting compatible with your Babel setup
  }
}
```

The reason for this is that `tsc` would otherwise generate code where the
imported `graphql` function is being namespaced (`react_relay_1` in this
example):

```js
react_relay_1.createFragmentContainer(
  MyComponent,
  react_relay_1.graphql`
  ...
`
);
```

… which makes it impossible for `babel-plugin-relay` to find the locations
where the `graphql` function is being used.

*The generated code uses ES2015 module syntax if `module` is set to ES2015 or
higher in your `tsconfig.json`. Note that the `eagerESModules` option from
`relay-compiler` has no effect on the generated code if `module` is ES2015 or
higher.*

#### Custom Headers

If you need to add a custom header to generated files, perhaps for a custom linter
or to get boilerplate license code in, that can be passed in also in compilerOptions
as `banner`:

```json
{
  "compilerOptions": {
    "banner": "/* © 2021 Example.org - @generated code */"
  }
}
```

## Problems

### React Hot Loader

React Hot Loader is known to not always work well with generated code such as
our typing artifacts, which will lead to loading modules _with_ TypeScript types
into the browser and break. As a maintainer of RHL
[pointed out](https://github.com/gaearon/react-hot-loader/issues/1032) in a
similar issue:

> The problem - hot reloading is not "complete"

So
[until RHL will be made “complete”](https://github.com/gaearon/react-hot-loader/issues/1024)
this project can’t gurantee to always work well with it, nor is it our control
to do anything about that.

## Also see

* You can find a copy of the Relay
  [example TODO app](https://github.com/relay-tools/relay-compiler-language-typescript/tree/master/example)
  inside this repository or you can take a look at the
  [Artsy React Native app](https://github.com/artsy/eigen).
* There are Relay tslint rules available
  [here](https://github.com/relay-tools/tslint-plugin-relay).

## License

This package is available under the MIT license. See the included LICENSE file
for details.

---
_Source: https://npm.io/package/relay-compiler-language-typescript · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._