Skip to main content

Relay Compiler

what is relay compiler​

install relay compiler​

pnpm add -D relay-compiler

add script​

in packages.json

"scripts": {
  "relay": "relay-compiler"
}

compiler configuration​

create file relay.config.json

{
  "src": "./src",
  "schema": "./data/schema.graphql",
  "language": "typescript",
  "eagerEsModules": true,
  "exclude": ["**/node_modules/**", "**/__mocks__/**", "**/__generated__/**"]
}

setup vite plugin relay​

to transform graphql document in react code

pnpm add -D babel-plugin-relay vite-plugin-relay

in vite.config.ts

import { defineConfig } from 'vite'
import relay from 'vite-plugin-relay'

export default defineConfig({
  plugins: [..., relay],
})

write some query​

install react-relay

pnpm add react-relay
pnpm add -D @types/react-relay
// App.tsx
import { graphql } from 'react-relay'

const query = graphql`
  query AppQuery {
    taskConnection(first: 10) {
      edges {
        node {
          id
          content
          isDone
          createdAt
          updatedAt
        }
      }
    }
  }

try pnpm relay, you can see __generated__/AppQuery.graphql.ts. It's relay artifact include types for typescript.

run the compiler​

after setup, you can try to write some query and run relay

pnpm relay

relay compiler can also watch the change in react code (Note: Requires watchman to be installed)

pnpm relay --watch