npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@wundergraph/react-relay

v0.4.33

Published

WunderGraph Relay Integration

Downloads

144

Readme

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

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

React with Vite

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

npm install @wundergraph/react-relay

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

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

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

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.

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!

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.

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:

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

On your client:

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

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.

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