Relay 프로젝트 초기화(Typescript)

Create React App 으로 React 프로젝트를 생성한다면, npm eject 를 사용하거나, react-app-rewired 와 같은 방식을 사용해야한다.

• Create React App 후

npm i react-relay babel-plugin-relay graphql
npm i --save-dev relay-config relay-compiler relay-compiler-language-typescript @types/react-relay

 

• relay.config.js

module.exports = {
  // ...
  // Configuration options accepted by the `relay-compiler` command-line tool and `babel-plugin-relay`.
  src: "./src",
  schema: "./data/schema.graphql",
  exclude: ["**/node_modules/**", "**/__mocks__/**", "**/__generated__/**"],
 language: "typescript"
}

 

• package.json

npm eject 실행 후, .babelrc 에 해당하는 내용을 plugins 에 넣는다.

// package.json
"scripts": {
 "relay": "relay-compiler --language typescript --src ./src --schema ./schema.graphql"
},
"plugins: [
 "relay"
]

 

• Relay compiler 실행 (watchman 설치가 필요하다.)

npm run relay -- --watch

이제 schema에 기반하여, type 파일이 자동 생성되는 것을 확인할 수 있다.