MENU


Installing React Relay

(The different files shown across this section and the following pages ('Basic Query' and 'Basic Update') are shared, eg. 'schema.graphql', 'fetchGraphQL.js', 'RelayEnvironment.js'.)

To install React-Relay:

Installing React Relay's runtime and build-time dependencies via npm
npm install --save relay-runtime react-relaynpm install --save-dev relay-compiler graphql babel-plugin-relay

Then edit the file package.json:

Wiring the relay-compiler step into package.json's npm scripts (Create React App example)
{ ... "scripts": { ... "start": "npm run relay && react-scripts start", "build": "npm run relay && react-scripts build", "relay": "relay-compiler --schema schema.graphql --src ./src/ --watchman false $@" ... }, ...}

The example above assumes Create React App's 'react-scripts', which is now a legacy toolchain (the React team recommends a framework, or a build tool like Vite, for new projects). The 'npm run relay &&' prefix is what matters here, though — it works the same way whichever toolchain you use, as long as you run it before your dev server or build script starts.

Enter 'npm start' to compile the GraphQL schema (schema.graphql above) and all the graphql`...` statements, and then start the development server.