remix-relay

A small library providing integration between the React Router v7 framework (formerly Remix) and the Relay GraphQL client, enabling streaming with the @defer directive.

What does it look like?

const query = graphql`
  query MovieQuery($slug: String!) {
    movie(slug: $slug) {
      title
      ...MovieDetailFragment
      ...MovieReviewsListFragment @defer
    }
  }
`;

export const meta = metaQuery<MovieQuery>(({ data }) => [
  { title: `${data.movie.title} - Movie App` },
]);

export const loader = (args: Route.LoaderArgs) =>
  loaderQuery<MovieQuery>(args, query, args.params);

export const clientLoader = (args: Route.ClientLoaderArgs) =>
  clientLoaderQuery<MovieQuery>(query, args.params);

export default function Movie() {
  const [data] = useLoaderQuery<MovieQuery>(query);

  return (
    <main>
      <MovieDetail dataRef={data.movie} />
      <Deferred fallback={<Spinner />}>
        <MovieReviewsList dataRef={data.movie} />
      </Deferred>
    </main>
  );
}

Docs

• Getting started guide
• What about actions and fetchers?

Examples

Movie app	Counter app	Trellix

Sequence diagrams

Relay SPA (no @defer)

sequenceDiagram
  Browser->>+Server: GET /
  Server-->>-Browser: Document
  Note over Browser: First paint
  Browser->>+Server: GET /assets/bundle.js
  Server-->>-Browser: bundle.js
  Browser->>Browser: Render suspense fallback
  Browser->>+Server: POST /graphql
  Server->>+DB: Get Movie
  DB-->>-Server: Movie data
  Server->>+DB: Get Reviews
  DB-->>-Server: Reviews data
  Server-->>-Browser: Data
  Browser->>Browser: Render complete page
  Note over Browser: First meaningful paint
  Note over Browser: Done

Loading

remix-relay (no @defer)

sequenceDiagram
  Browser->>+Server: GET /
  Server->>+DB: Get Movie
  DB-->>-Server: Movie data
  Server->>+DB: Get Reviews
  DB-->>-Server: Reviews data
  Server->>Server: Render complete page
  Server-->>-Browser: Document
  Note over Browser: First meaningful paint
  Browser->>+Server: GET /assets/bundle.js
  Server-->>-Browser: bundle.js
  Browser->>Browser: Rehydrate
  Note over Browser: Interactive
  Note over Browser: Done

Loading

remix-relay (with @defer)

sequenceDiagram
  Browser->>+Server: GET /
  Server->>+DB: Get Movie
  DB-->>-Server: Movie data
  Server->>+DB: Get Reviews
  Server->>Server: Render Movie details
  Server-->>Browser: Chunk 1
  Note over Browser: First meaningful paint
  Browser->>+Server: GET /assets/bundle.js
  Server-->>-Browser: bundle.js
  Browser->>Browser: Rehydrate
  Note over Browser: Interactive
  DB-->>-Server: Reviews data
  Server-->>-Browser: Chunk 2
  Browser->>Browser: Render complete page
  Note over Browser: Done

Loading