cd relay-example

npm install relay-runtime react-relay --force

npm install relay-runtime@main react-relay@main

npm install --devvite-plugin-relay relay-compiler --force

npm install --devbabel-plugin-relaygraphqlrelay-compiler@main

npm install --dev @types/relay-runtime @types/react-relay --force

npm install --dev @types/relay-runtime @types/react-relay

Relay uses a[Babel plugin](./babel-plugin.md) to insert code generated by the Relay compiler into your bundle. We can enablethat transform in Vite withthe`vite-plugin-relay`plugin:

Relay uses a[Babel plugin](./babel-plugin.md) to insert code generated by the Relay compiler into your bundle. We can enablethe Relay Babel plugin we installed earliery by configuringtheReact Viteplugin.

```tsx title="vite.config.ts"

import {defineConfig }from'vite'

importrelayfrom'vite-plugin-relay';

exportdefaultdefineConfig({

plugins: [

react(),

],

})

Next we will download the schema for the Star Wars GraphQL endpoint and configure the Relay compiler to use that schema:

Next we will download theGraphQLschema for the Star Wars GraphQL endpoint.

curl -O https://raw.githubusercontent.com/graphql/swapi-graphql/refs/heads/master/schema.graphql

And define our`relay.config.json` config file which tells the[Relay Compiler](./compiler.md) which schema file we want it to use and other details about our project.

```json title="relay.config.json"

{

"src":"./src",

See[Relay Environment](../api-reference/relay-runtime/relay-environment.md) for an overview of the Relay Environment and how to configure it.

`<RelayEnvironmentProvider>` exposes your Environment via[React context](https://react.dev/learn/passing-data-deeply-with-context), so it must wrap your entire application.

Finally we can start defining the data we want to fetch and build our UI:

Finally we can start defining the data we want to fetch and build our UI. Our app will fetch a list of films and render each one using a`<Film>` component.

```tsx title="src/App.tsx"

import {AppQuery }from"./__generated__/AppQuery.graphql";

import {graphql,useLazyLoadQuery }from"react-relay";

importFilmfrom"./Film";

exportdefaultfunction App() {

const data=useLazyLoadQuery<AppQuery>(

<div>

<h1>Star Wars Films</h1>

{films?.map((film)=> (

<likey={film.id}>

<b>{film.title}</b>: directed by <i>{film.director}</i>

</li>

<Filmkey={film.id}film={film} />

))}

</div>

);

}

One of Relay's core principles is that each component should define its own data dependencies. So, we define our`<Film>` component using a[GraphQL Fragment](https://graphql.org/learn/queries/#fragments).

```typescript title="src/Film.tsx"

import {graphql,useFragment }from"react-relay";

importtype {Film_item$key }from"./__generated__/Film_item.graphql";

exportdefaultfunction FilmListItem(props: { film:Film_item$key; }) {

const film=useFragment<Film_item$key>(

`,

props.film

);

return (

<li>

<b>{film.title}</b>: directed by <i>{film.director}</i>

);

}

All that’s left is to run the Relay compiler and start your app!

The Relay compiler generates TypeScript types and combines your queries and fragments into optimized representations. You have to run the Relay compiler each time you modify your GraphQL queries or fragments.

If you have[Watchman](https://facebook.github.io/watchman/) installed, run`echo "{}" > .watchmanconfig` to create a Watchman root.

If you have[Watchman](https://facebook.github.io/watchman/) installed you can run`npx relay-compiler --watch` to have the compiler run in watch mode, but you'll need to run`echo "{}" > .watchmanconfig` to create a Watchman root.

You should now be able to open your app in a browser:[http://localhost:5173/](http://localhost:5173/)

May the force be with you!