relay-modern-typescript-transformer
A Typescript transformer that transforms GraphQL queries to require functions.
Tutorial
Install with Yarn (or NPM)
$ yarn add relay-modern-typescript-transformer$ yarn add relay-compiler
relay-compiler
is used to compile the queries into optimized .graphql files.
Read the Relay Modern docs for more info.
Add transform to Typescript config
For fuse-box
, just add:
const transformer = ;
And then:
fuse = FuseBox.init(
{
...
transformers: {
before: [
transformer,
],
},
});
Run relay-compiler on your sources
./node_modules/.bin/relay-compiler --src ./src --schema ./src/data/schema.json --extensions tsx
relay-compiler
is designed for Javascript sources, but work somewhat well on TS sources as well.
If it doesn't work for some reason, extract your query into a separate, smaller source file.
Start fusebox
node fuse.js
Or whatever way you boot your project.
Done!
You can now use Relay Modern with Typescript!
Example
const query = graphql`query WelcomeScreenQuery { pokemon(name: "Pikachu") { name weight { minimum maximum } }} `; Component { return <QueryRenderer environment=environment query=query variables={} render= { if error return <div>errormessage</div>; else if props return <WelcomePane />; return <div>Loading</div>; } /> ; }
This code is placed in:
src/WelcomeScreen.tsx
When running the compiler, you will get this:
src/__generated__/WelcomeScreenQuery.graphql.js
The transformer will compile
const query = graphql...
into
const query = function () { return require('./__generated__/WelcomeScreenQuery.graphql.js')`.
Remember to name your query according to constraints.
Troubleshooting
It's not working?
First, make sure that relay-compiler
has created the graphql-files.
They should be placed along side your source files in a folder name __generated__/
.
graphql: Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site.
If you get this error, then the transformer is missing. Make sure you have added it correctly to your config used by the Typescript compiler.