Registry / type-stubs / relay-compiler-language-typescript

relay-compiler-language-typescript

library15.0.1jsnpmunverified

This package served as a language plugin for `relay-compiler`, providing TypeScript support, including the emission of type definitions for Relay artifacts. It enabled Relay users to leverage TypeScript for their GraphQL operations and component props. The current stable version is 15.0.1. Historically, it filled a critical gap by adding TypeScript capabilities to Relay's build process. However, as of Relay v13, TypeScript support is natively integrated into the core `relay-compiler`, rendering this standalone plugin obsolete. Its release cadence was tied to major Relay versions and bug fixes, but active development has ceased due to its superseded status. Developers are now advised to use the built-in TypeScript features of `relay-compiler` directly.

type-stubs

npm install relay-compiler-language-typescript

github ↗package ↗

INSTALL

IMPORT

SIG · RELAY-COMPILER-LAN

relay-compiler-language-typescript

type-stubsjavascriptv15.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Relay Compiler Configuration

✓ relay-compiler --language typescript --src ./src --schema data/schema.graphql --artifactDirectory ./src/__generated__

✗ import * as RelayTS from 'relay-compiler-language-typescript';

This package functions as a plugin for `relay-compiler`. It is enabled by specifying `--language typescript` in the `relay-compiler` CLI arguments or `relay.config.json`, rather than through direct programmatic imports in application code. As of Relay v13+, this explicit configuration is no longer necessary as TypeScript support is built-in.

TypeScript Type Artifacts

✓ import { MyComponent_data$key } from './__generated__/MyComponent_data.graphql';

✗ import { MyComponent_data$key } from 'relay-compiler-language-typescript';

The primary output of this plugin (and now native Relay TS support) is TypeScript type definitions for Relay artifacts. These types are generated into specified directories (e.g., `__generated__`) and then imported from those *generated* files into your application code, not directly from the `relay-compiler-language-typescript` package itself.

Custom Headers (banner option)

✗ import { addBanner } from 'relay-compiler-language-typescript'

The `banner` option for custom headers is a configuration setting passed to `relay-compiler` (typically in `relay.config.json` within the `compilerOptions` block), not a function or object imported directly from the package into application code.

Demonstrates the `package.json` setup for installing the plugin and `relay-compiler`, configuring the `relay` script, and essential `tsconfig.json` and `.babelrc` settings.

{ "devDependencies": { "graphql": "^15.7.0", "relay-compiler": ">=12.0.0", "typescript": ">=4.5.0", "relay-compiler-language-typescript": "^15.0.0" }, "scripts": { "relay": "relay-compiler --src ./src --schema data/schema.graphql --language typescript --artifactDirectory ./src/__generated__" } } // tsconfig.json { "compilerOptions": { "module": "ES2015", "target": "ES2020" } } // .babelrc { "plugins": [["relay", { "artifactDirectory": "./src/__generated__" }]] }

Debug

Known issues

breakingThis package is explicitly marked as obsolete. Relay version 13.0.0 and later now include native TypeScript support directly within the `relay-compiler`. Continued use of `relay-compiler-language-typescript` is discouraged.

fix

Upgrade to `relay-compiler` v13.0.0 or higher and remove `relay-compiler-language-typescript` from your dependencies. Update your `relay-compiler` configuration to use the native TypeScript support.

affects: >=15.0.1

breaking`relay-compiler-language-typescript` v15.0.0 introduced breaking changes related to TypeScript 4.5 type generation, and requires a minimum TypeScript version of 4.5.0.

fix

Ensure your project's `typescript` peer dependency is at version 4.5.0 or higher. Review generated types for any subtle changes in behavior or stricter enforcement.

affects: >=15.0.0

breaking`relay-compiler-language-typescript` v14.0.0 dropped support for TypeScript 3.

fix

Upgrade your project's `typescript` peer dependency to version 4.x or higher before upgrading to `relay-compiler-language-typescript` v14.0.0.

affects: >=14.0.0

gotchaImproper `tsconfig.json` module settings can prevent `babel-plugin-relay` from finding `graphql` function usages, leading to compilation failures.

fix

Always set `compilerOptions.module` to `ES2015` (or higher) and `compilerOptions.target` to `ES2020` (or the highest compatible with your Babel setup) in your `tsconfig.json` to ensure `tsc` generates compatible ES module syntax.

affects: All

gotchaReact Hot Loader (RHL) is known to have compatibility issues with generated code, including Relay's typing artifacts, which can cause module loading errors in the browser during hot reloading.

fix

The project maintainers state that `relay-compiler-language-typescript` cannot guarantee compatibility with RHL. Consider migrating to more modern hot-reloading solutions like React Refresh, or disabling RHL for files containing Relay artifacts.

affects: All

Errors

Common errors & fixes

babel-plugin-relay cannot find the locations where the `graphql` function is being used (e.g., 'react_relay_1.graphql').

The TypeScript compiler (`tsc`) generated CommonJS-style imports and namespaces the `graphql` function, making it unidentifiable by `babel-plugin-relay`.

fix

In your `tsconfig.json`, set `compilerOptions.module` to `ES2015` or higher, and `compilerOptions.target` to `ES2020` or a compatible modern target. This ensures `tsc` outputs ES module syntax that `babel-plugin-relay` can correctly parse.

Unexpected module loading errors or type conflicts in the browser during development with React Hot Loader (RHL).

React Hot Loader's module replacement mechanism can struggle with dynamically generated TypeScript type definition files, leading to runtime errors or incorrect hot module updates.

fix

This package has known incompatibilities with RHL. The recommended solution is to transition to `react-refresh` (used in tools like Create React App v4+), which offers more robust hot reloading capabilities for modern React applications. Alternatively, configure RHL to exclude Relay-generated artifact directories from its processing.

Error: `relay-compiler-language-typescript` requires `typescript@>=4.5.0` to be installed.

Your project's `typescript` version is older than the minimum required by `relay-compiler-language-typescript` v15 and above.

fix

Update your project's `typescript` dependency to `^4.5.0` or a newer compatible version (e.g., `npm install typescript@^4.5.0` or `yarn add typescript@^4.5.0`).

Upgrade

Version history

15.0.1latest on npm

Audit

Dependencies

@types/react-relayrequiredPeer dependency for TypeScript types related to Relay's React integration.

@types/relay-runtimerequiredPeer dependency for TypeScript types related to Relay's runtime APIs.

relay-compilerrequiredThe core Relay compiler that this package plugs into to provide TypeScript language support.

relay-runtimerequiredRelay's core runtime library, required for the generated code and types.

typescriptrequiredRequired for its TypeScript compilation and type generation capabilities.

Agent activity

24 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/relay-tools/relay-compiler-language-typescript ↗

packagehttps://www.npmjs.com/package/relay-compiler-language-typescript ↗