Clients

React Relay client

WunderGraph Relay Integration

@wundergraph/react-relay

This package provides a type-safe integration of react-relay with WunderGraph. Relay is a JavaScript framework for building data-driven React applications, efficiently fetching and managing data from GraphQL APIs. It optimizes network requests, simplifies client-side data management, and enables performant, scalable apps.

Warning: Only works with WunderGraph.

Getting Started

The easiest way to get started with WunderGraph + Relay is to use one of our templates

Next.js

1
npx create-wundergraph-app my-project --example nextjs-relay

React with Vite

1
npx create-wundergraph-app my-project --example vite-react-relay

Add relay to an existing WunderGraph + Relay project

Install WunderGraph Relay sdk into your project

1
npm install @wundergraph/react-relay

Make sure you have set your code generation to include the base typescript client.

1
2
3
4
5
6
7
8
9
10
11
// wundergraph.config.ts
configureWunderGraphApplication({
  // ... omitted for brevity
  codeGenerators: [
    {
      templates: [templates.typescript.client],
      // the location where you want to generate the client
      path: '../src/components/generated',
    },
  ],
});

In your relay config add the persistConfig option and make sure the persisted.json file is in your .wundergraph/operations/relay directory (you might have to create an empty file in the target location for the first time)

1
2
3
4
5
6
7
8
  //...
  "relay": {
    //...
    "persistConfig": {
      "file": "./.wundergraph/operations/relay/persisted.json"
    }
  }
  //...

WunderGraph will use the persisted.json file to generate the necessary Relay code. Now you can use the WunderGraph Relay provider & utility functions.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { createWunderGraphRelayApp } from '@wundergraph/react-relay';
import { createClient } from '../generated/client';


const client = createClient(); // Typesafe WunderGraph client


// These utility functions needs to be imported into your app
export const {
  WunderGraphRelayProvider,
  useLiveQuery,
  getEnvironment,
  fetchWunderGraphSSRQuery,
  fetchWunderGraphSSGQuery,
} = createWunderGraphRelayApp({
  client,
});

Now, in your React App, make sure the whole application is Wrapped under WunderGraphRelayProvider.

1
2
3
const App = () => {
  return <WunderGraphRelayProvider>{/** Rest of your Application */}</WunderGraphRelayProvider>;
};

All the existing Relay APIs will work normally, the provider will make sure that Relay uses the WunderGraph generated client behind the scenes.

The Relay integration also provides two very powerful utilities

Live Queries

The useLiveQuery hooks lets you leverage the power of WunderGraph's Live Queries feature to make your application realtime!

1
2
3
4
const { data, isLoading, isSubscribed, error } = useLiveQuery<QueryType>({
  query: /** Query */,
  queryReference,
});

The useLiveQuery hook syncs with the Relay store which means if the query is already fetched in SSR, it will render immediately.

Render As You Fetch

To implement the Render-As-You-Fetch pattern for your queries in React, you can use the Relay's loadQuery utility along with the getEnvironment utility function provided by WunderGraph.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const AppDragonsQuery = graphql`
  query DragonsListDragonsQuery {
    spacex_dragons {
      ...Dragons_display_details
    }
  }
`;


const dragonsListQueryReference = loadQuery<DragonsListDragonsQueryType>(getEnvironment(), AppDragonsQuery, {});


export const DragonsList = () => {
  const { data } = useLiveQuery<DragonsListDragonsQueryType>({
    query: AppDragonsQuery,
    queryReference: dragonsListQueryReference,
  });


  return (
    <div>
      <p>Dragons:</p>
      {data?.spacex_dragons?.map((dragon, dragonIndex) => {
        if (dragon) return <Dragon key={dragonIndex.toString()} dragon={dragon} />;
        return null;
      })}
    </div>
  );
};

As shown in the above example, the loadQuery function has to be called outside of the React Component to ensure the fetching happens as soon as the component is loaded into memory. Works well when prefetching pages using React Router or Next Link components.

SSR Support

The fetchWunderGraphSSRQuery lets you fetch queries on the serverside and hydrate your Relay store on the client using the WunderGraphRelayProvider

On your Server:

1
2
3
const { initialRecords, queryResponse } = await fetchWunderGraphSSRQuery<QueryType>(/** Query */, {
  /** Query Variables */
});

On your client:

You can hydrate relay store for the whole application using initialRecords:

1
2
3
4
5
6
7
const App = () => {
  return (
    <WunderGraphRelayProvider initialRecords={initialRecords}>
      {/** Rest of your Application */}
    </WunderGraphRelayProvider>
  );
};

SSG Support (Experimental)

If you are planning to use Relay for SSG projects where pages are generated only on build time & doesn't have a Relay client on the generated pages (SSG projects created with frameworks like Astro or 11ty ), you can use the fetchWunderGraphSSGQuery which will make the API calls during builds & completely bypasses the need for Relay Store by directly returning the JSON data.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
const weatherData = await fetchWunderGraphSSGQuery<QueryType>(/** Query */, {
  /** Query Variables */
});
---


<div class={styles.container}>
  <main class={styles.main}>
    {weatherData?.weather_getCityByName?.weather?.summary && (
      <Weather weather={weatherData.weather_getCityByName.weather.summary} />
    )}
    {weatherData?.weather_getCityByName?.weather?.temperature && (
      <TemperatureDetails weather={weatherData.weather_getCityByName.weather.temperature} />
    )}
  </main>
</div>

Learn more

To learn more about Relay, read our Quickstart Guide

Previous
Next.js
Next
React Query

Was this article helpful to you?
Provide feedback

Edit this page