How to Configure React Relay with Vite
This is a short tutorial on how to properly configure React Relay with Vite. I've also written a small sample repo in case you prefer looking at code.
Step:1 Installing the dependencies
Install the dev dependencies first.
yarn add --dev \
@types/react-relay@^14.1.2 \
@types/relay-runtime@^14.1.3 \
babel-plugin-relay@^14.1.0 \
relay-compiler@^14.1.0 \
vite-plugin-relay@^2.0.0 \
graphql@^15.3.0
Then the prod dependencies.
yarn add react-relay@^14.1.0 relay-runtime@^14.1.0
Step 2: Configuring Relay
Create a file relay.config.json
at the root of your repository with the following content.
{
"src": "./src",
"language": "typescript",
// Change this to the location of your graphql schema
"schema": "./src/graphql/schema.graphql",
"exclude": [
"**/node_modules/**",
"**/__mocks__/**",
"**/__generated__/**"
],
"eagerEsModules": true
}
Step 3: Configuring the RelayEnvironment
Configure a global Environment
as follows. This is how you tell Relay how to connect to your GraphQL endpoint. In this example I'm connecting to the Github API.
import {
Environment,
Network,
RecordSource,
Store,
FetchFunction,
} from "relay-runtime";
const fetchRelay: FetchFunction =
async (params, variables) => {
const response = await fetch(
"https://api.github.com/graphql",
{
method: "POST",
headers: {
"content-type":
"application/json",
authorization: `bearer ${process.env.GITHUB_TOKEN}`,
},
body: JSON.stringify({
query: params.text,
variables,
}),
}
);
// Get the response as JSON
return await response.json();
};
// Export a singleton instance of Relay Environment configured with our network function:
export const RelayEnvironment =
new Environment({
network: Network.create(fetchRelay),
store: new Store(
new RecordSource()
),
});
Step 4: Setup the RelayEnvironment at the top of your React tree
import { RelayEnvironmentProvider } from "react-relay";
import { RelayEnvironment } from "./graphql/RelayEnvironment";
function App() {
<RelayEnvironmentProvider
environment={RelayEnvironment}
>
<TheRestOfYourApp />
</RelayEnvironmentProvider>;
}
Step 5: Run the relay compiler
yarn relay --watch
Step 6: write your first component
In this example I'm fetching the name and number of stars from the Relay repository.
import {
graphql,
useLazyLoadQuery,
} from "react-relay";
// This will be auto-generated by the relay compiler once you've written the RepositoryQuery below.
import { RepositoriesQuery } from "./__generated__/RepositoriesQuery.graphql";
export function Repositories() {
const { repository } =
useLazyLoadQuery<RepositoriesQuery>(
graphql`
query RepositoriesQuery {
repository(
owner: "facebook"
name: "relay"
) {
name
stargazerCount
}
}
`,
{}
);
if (!repository) {
return null;
}
return (
<div>
<h1>Repositories</h1>
<p>
{repository.name} -{" "}
{repository.stargazerCount}
</p>
</div>
);
}
Step 7: Have fun!
Congrats, you've configured React Relay! I've also written a small repository where everything is already configured, you can find it here.
If you liked this article, follow me on twitter. I write about once a month about software engineering practices and programming in general.
Other posts you may like...
Knowledge is like a house of cards
On the importance of building solid foundations. Read more.
Why read Dostoevsky? A programmer's perspective
On the limits of scientific knowledge and the importance of reading the classics. Read more.
Always use [closed, open) intervals
A short note on the dangers of using [closed, closed] intervals. Read more.