Getting Started

This guide will help you get started with solid-relay.

Installation

First, you need to install the necessary packages. solid-relay requires solid-js and relay-runtime.

npm install solid-relay solid-js relay-runtime

You will also need to set up the Relay compiler.

npm install --save-dev relay-compiler

And create a relay.config.json file in your project root:

{
  "src": "./src",
  "schema": "./schema.graphql",
  "language": "typescript",
  "artifactDirectory": "./src/__generated__",
  "eagerEsModules": true
}

Now you can run the compiler with:

npx relay-compiler

Setting up the Relay Environment

The Relay Environment is the central piece of Relay. It manages the cache and the network layer. You need to create an environment and provide it to your application.

Here is an example of how to create a basic Relay Environment:

import {
  Environment,
  FetchFunction,
  Network,
  RecordSource,
  Store,
} from "relay-runtime";

const fetchFn: FetchFunction = async (params, variables) => {
  const response = await fetch("http://localhost:4000/graphql", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      query: params.text,
      variables,
    }),
  });

  return response.json();
};

export function createRelayEnvironment() {
  return new Environment({
    network: Network.create(fetchFn),
    store: new Store(new RecordSource()),
  });
}

Now you need to provide the environment to your application using the RelayEnvironmentProvider. It's recommended to create the environment in a context to ensure it's not shared between requests on the server.

import { render } from "solid-js/web";
import { RelayEnvironmentProvider } from "solid-relay";
import { createRelayEnvironment } from "./RelayEnvironment";
import App from "./App";

const relayEnvironment = createRelayEnvironment();

render(
  () => (
    <RelayEnvironmentProvider environment={relayEnvironment}>
      <App />
    </RelayEnvironmentProvider>
  ),
  document.getElementById("root")!
);

Basic Usage

Now you can use solid-relay to fetch data in your components. Here is a basic example of how to use createLazyLoadQuery:

import { Show } from "solid-js";
import { createLazyLoadQuery } from "solid-relay";
import { graphql } from "relay-runtime";
import type { AppQuery } from "./__generated__/AppQuery.graphql";

const App = () => {
  const query = createLazyLoadQuery<AppQuery>(
    graphql`
      query AppQuery {
        viewer {
          login
        }
      }
    `,
    {}
  );

  return (
    <Show when={query()}>
      {(data) => <p>Logged in as: {data().viewer.login}</p>}
    </Show>
  );
};

export default App;

This is just a basic example. The following sections will go into more detail about the different features of solid-relay.

Last updated: 7/24/25, 1:24 PM

Edit this page on GitHub