vite-react-relay

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

Getting Started

First, run the development server:

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

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

Wrap your app component with WunderGraphRelayProvider

// 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

// 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