Vite + React + Relay Example

The Vite + React + Relay example demonstrates how to use Relay with a Vite + React based WunderGraph project.

Getting Started

First, run the development server:

1
2
3
4
5
npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

Using WunderGraph

Create the utility functions needed to work with Relay

1
2
3
4
// in src/lib/wundergraph/index.ts
export const { WunderGraphRelayProvider, useLiveQuery, fetchWunderGraphSSRQuery } = createWunderGraphRelayApp({
  client,
});

Wrap your app component with WunderGraphRelayProvider

1
2
3
4
5
6
7
8
// in src/main.tsx
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <WunderGraphRelayProvider>
      <App />
    </WunderGraphRelayProvider>
  </React.StrictMode>
);

You can now start using Relay within the project

1
2
// in src/App.tsx
const [queryReference, loadQuery] = useQueryLoader<AppDragonsQueryType>(AppDragonsQuery);

Learn more about WunderGraph + Relay

To learn more about WunderGraph Relay integration, read our Quickstart Guide

Deploy to WunderGraph

Previous
Vite + Solid.js
Next
Vite + Svelte

Was this article helpful to you?
Provide feedback

Edit this page