https://github.com/dantrain/remix-relay
Integration between the React Router v7 framework and the Relay GraphQL client
https://github.com/dantrain/remix-relay
react react-router relay remix
Last synced: 2 months ago
JSON representation
Integration between the React Router v7 framework and the Relay GraphQL client
- Host: GitHub
- URL: https://github.com/dantrain/remix-relay
- Owner: dantrain
- License: mit
- Created: 2024-01-06T22:21:09.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2026-03-29T14:43:42.000Z (3 months ago)
- Last Synced: 2026-03-29T17:30:04.155Z (3 months ago)
- Topics: react, react-router, relay, remix
- Language: TypeScript
- Homepage:
- Size: 2.94 MB
- Stars: 49
- Watchers: 2
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
remix-relay
A small library providing integration between the [React Router v7](https://reactrouter.com/) framework (formerly [Remix](https://remix.run/)) and the [Relay](https://relay.dev/) GraphQL client, enabling streaming with the `@defer` directive.
## What does it look like?
```typescript
const query = graphql`
query MovieQuery($slug: String!) {
movie(slug: $slug) {
title
...MovieDetailFragment
...MovieReviewsListFragment @defer
}
}
`;
export const meta = metaQuery(({ data }) => [
{ title: `${data.movie.title} - Movie App` },
]);
export const loader = (args: Route.LoaderArgs) =>
loaderQuery(args, query, args.params);
export const clientLoader = (args: Route.ClientLoaderArgs) =>
clientLoaderQuery(query, args.params);
export default function Movie() {
const [data] = useLoaderQuery(query);
return (
}>
);
}
```
## Docs
- [Getting started guide](docs/getting-started.md)
- [What about actions and fetchers?](docs/what-about-actions-and-fetchers.md)
## Examples
| [Movie app](https://dans-movie-app.dantrain.workers.dev/) | [Counter app](https://dans-counter-app.fly.dev/) | [Trellix](https://trellix-relay.fly.dev/) |
| :---------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------: |
| [
](https://dans-movie-app.dantrain.workers.dev/) | [
](https://dans-counter-app.fly.dev/) | [
](https://trellix-relay.fly.dev/) |
## Sequence diagrams
### Relay SPA (no @defer)
```mermaid
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
```
### remix-relay (no @defer)
```mermaid
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
```
### remix-relay (with @defer)
```mermaid
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
```