Gathering detailed insights and metrics for relay-compiler-language-typescript
Gathering detailed insights and metrics for relay-compiler-language-typescript
Gathering detailed insights and metrics for relay-compiler-language-typescript
Gathering detailed insights and metrics for relay-compiler-language-typescript
npm install relay-compiler-language-typescript
Module System
Min. Node Version
Typescript Support
Node Version
NPM Version
241 Stars
870 Commits
70 Forks
8 Watching
18 Branches
48 Contributors
Updated on 27 Jul 2024
TypeScript (82.8%)
JavaScript (9.89%)
CSS (6.74%)
HTML (0.54%)
Shell (0.02%)
Cumulative downloads
Total Downloads
Last day
6.1%
3,702
Compared to previous day
Last week
-1.1%
16,799
Compared to previous week
Last month
12.8%
70,350
Compared to previous month
Last year
-53.1%
826,781
Compared to previous year
1
25
This repository is obsolete as relay@13 now supports TypeScript directly.
A language plugin for Relay that adds TypeScript support, including emitting type definitions.
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.
Then configure your relay-compiler
script to use it, like so:
1{ 2 "scripts": { 3 "relay": 4 "relay-compiler --src ./src --schema data/schema.graphql --language typescript --artifactDirectory ./src/__generated__" 5 } 6}
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
:
1{ 2 "plugins": [["relay", { "artifactDirectory": "./src/__generated__" }]] 3}
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:
1{ 2 "compilerOptions": { 3 "module": "ES2015", // ES2015 or higher 4 "target": "ES2020" // best use the highest target setting compatible with your Babel setup 5 } 6}
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):
1react_relay_1.createFragmentContainer( 2 MyComponent, 3 react_relay_1.graphql` 4 ... 5` 6);
… 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.
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
:
1{ 2 "compilerOptions": { 3 "banner": "/* © 2021 Example.org - @generated code */" 4 } 5}
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 in a similar issue:
The problem - hot reloading is not "complete"
So until RHL will be made “complete” this project can’t gurantee to always work well with it, nor is it our control to do anything about that.
This package is available under the MIT license. See the included LICENSE file for details.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
project is archived
Details
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
35 existing vulnerabilities detected
Details
Score
Last Scanned on 2024-11-18
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More