{"id":20459797,"url":"https://github.com/dantrain/remix-relay","last_synced_at":"2026-04-02T19:08:15.039Z","repository":{"id":235569731,"uuid":"739902881","full_name":"dantrain/remix-relay","owner":"dantrain","description":"Integration between the React Router v7 framework and the Relay GraphQL client","archived":false,"fork":false,"pushed_at":"2026-03-29T14:43:42.000Z","size":3081,"stargazers_count":49,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-03-29T17:30:04.155Z","etag":null,"topics":["react","react-router","relay","remix"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dantrain.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-01-06T22:21:09.000Z","updated_at":"2026-03-29T14:43:06.000Z","dependencies_parsed_at":"2024-04-23T22:09:50.381Z","dependency_job_id":"6cbc32a9-8f0d-4d61-9cc0-7a8cd62da332","html_url":"https://github.com/dantrain/remix-relay","commit_stats":null,"previous_names":["dantrain/remix-relay"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/dantrain/remix-relay","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dantrain%2Fremix-relay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dantrain%2Fremix-relay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dantrain%2Fremix-relay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dantrain%2Fremix-relay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dantrain","download_url":"https://codeload.github.com/dantrain/remix-relay/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dantrain%2Fremix-relay/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31313970,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T12:59:32.332Z","status":"ssl_error","status_checked_at":"2026-04-02T12:54:48.875Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-router","relay","remix"],"created_at":"2024-11-15T12:17:18.609Z","updated_at":"2026-04-02T19:08:15.030Z","avatar_url":"https://github.com/dantrain.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://github.com/user-attachments/assets/adf6eedb-2c9e-4680-b058-dab4e6d1ea55\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://github.com/dantrain/remix-relay/assets/1765203/c2ab83b9-7e23-445d-b6cb-de4b3aff5d2e\"\u003e\n    \u003cimg alt=\"remix-relay logo\" width=\"400\" src=\"https://github.com/dantrain/remix-relay/assets/1765203/c2ab83b9-7e23-445d-b6cb-de4b3aff5d2e\"\u003e\n  \u003c/picture\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eremix-relay\u003c/h1\u003e\n\n\u003ca href=\"https://www.npmjs.com/package/@remix-relay/react\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/%40remix-relay%2Freact?label=%40remix-relay%2Freact\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/@remix-relay/server\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/%40remix-relay%2Fserver?label=%40remix-relay%2Fserver\"\u003e\u003c/a\u003e\n\nA 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.\n\n## What does it look like?\n\n\u003ca href=\"https://dans-movie-app.dantrain.workers.dev/movie/black_panther_2018\"\u003e\u003cpicture\u003e\u003csource media=\"(min-width: 1281px)\" srcset=\"https://github.com/user-attachments/assets/bd348bbb-5a59-4480-b964-2a32c0d08cc4\"\u003e\u003csource media=\"(max-width: 1280px)\" srcset=\"https://github.com/user-attachments/assets/e0b86873-d276-4fa6-a0ab-6e8439e20ef1\"\u003e\u003cimg alt=\"Movie app screenshot\" align=\"right\" src=\"https://github.com/user-attachments/assets/e0b86873-d276-4fa6-a0ab-6e8439e20ef1\"\u003e\u003c/picture\u003e\u003c/a\u003e\n\n```typescript\nconst query = graphql`\n  query MovieQuery($slug: String!) {\n    movie(slug: $slug) {\n      title\n      ...MovieDetailFragment\n      ...MovieReviewsListFragment @defer\n    }\n  }\n`;\n\nexport const meta = metaQuery\u003cMovieQuery\u003e(({ data }) =\u003e [\n  { title: `${data.movie.title} - Movie App` },\n]);\n\nexport const loader = (args: Route.LoaderArgs) =\u003e\n  loaderQuery\u003cMovieQuery\u003e(args, query, args.params);\n\nexport const clientLoader = (args: Route.ClientLoaderArgs) =\u003e\n  clientLoaderQuery\u003cMovieQuery\u003e(query, args.params);\n\nexport default function Movie() {\n  const [data] = useLoaderQuery\u003cMovieQuery\u003e(query);\n\n  return (\n    \u003cmain\u003e\n      \u003cMovieDetail movieRef={data.movie} /\u003e\n      \u003cDeferred fallback={\u003cSpinner /\u003e}\u003e\n        \u003cMovieReviewsList movieRef={data.movie} /\u003e\n      \u003c/Deferred\u003e\n    \u003c/main\u003e\n  );\n}\n```\n\n## Docs\n\n- [Getting started guide](docs/getting-started.md)\n- [What about actions and fetchers?](docs/what-about-actions-and-fetchers.md)\n\n## Examples\n\n|                                                  [Movie app](https://dans-movie-app.dantrain.workers.dev/)                                                  |                                                  [Counter app](https://dans-counter-app.fly.dev/)                                                  |                                                  [Trellix](https://trellix-relay.fly.dev/)                                                  |\n| :---------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------: |\n| [\u003cimg alt=\"Movie app\" src=\"https://github.com/user-attachments/assets/b4a9d786-9795-4b9a-88e0-2cd2b308e06e\"\u003e](https://dans-movie-app.dantrain.workers.dev/) | [\u003cimg alt=\"Counter app\" src=\"https://github.com/user-attachments/assets/d283529f-c938-4fd5-b49e-9823982d12c6\"\u003e](https://dans-counter-app.fly.dev/) | [\u003cimg alt=\"Trellix\" src=\"https://github.com/user-attachments/assets/fb56b4ec-bc69-424f-9f97-981a67af3a04\"\u003e](https://trellix-relay.fly.dev/) |\n\n## Sequence diagrams\n\n### Relay SPA (no @defer)\n\n```mermaid\nsequenceDiagram\n  Browser-\u003e\u003e+Server: GET /\n  Server--\u003e\u003e-Browser: Document\n  Note over Browser: First paint\n  Browser-\u003e\u003e+Server: GET /assets/bundle.js\n  Server--\u003e\u003e-Browser: bundle.js\n  Browser-\u003e\u003eBrowser: Render suspense fallback\n  Browser-\u003e\u003e+Server: POST /graphql\n  Server-\u003e\u003e+DB: Get Movie\n  DB--\u003e\u003e-Server: Movie data\n  Server-\u003e\u003e+DB: Get Reviews\n  DB--\u003e\u003e-Server: Reviews data\n  Server--\u003e\u003e-Browser: Data\n  Browser-\u003e\u003eBrowser: Render complete page\n  Note over Browser: First meaningful paint\n  Note over Browser: Done\n```\n\n### remix-relay (no @defer)\n\n```mermaid\nsequenceDiagram\n  Browser-\u003e\u003e+Server: GET /\n  Server-\u003e\u003e+DB: Get Movie\n  DB--\u003e\u003e-Server: Movie data\n  Server-\u003e\u003e+DB: Get Reviews\n  DB--\u003e\u003e-Server: Reviews data\n  Server-\u003e\u003eServer: Render complete page\n  Server--\u003e\u003e-Browser: Document\n  Note over Browser: First meaningful paint\n  Browser-\u003e\u003e+Server: GET /assets/bundle.js\n  Server--\u003e\u003e-Browser: bundle.js\n  Browser-\u003e\u003eBrowser: Rehydrate\n  Note over Browser: Interactive\n  Note over Browser: Done\n```\n\n### remix-relay (with @defer)\n\n```mermaid\nsequenceDiagram\n  Browser-\u003e\u003e+Server: GET /\n  Server-\u003e\u003e+DB: Get Movie\n  DB--\u003e\u003e-Server: Movie data\n  Server-\u003e\u003e+DB: Get Reviews\n  Server-\u003e\u003eServer: Render Movie details\n  Server--\u003e\u003eBrowser: Chunk 1\n  Note over Browser: First meaningful paint\n  Browser-\u003e\u003e+Server: GET /assets/bundle.js\n  Server--\u003e\u003e-Browser: bundle.js\n  Browser-\u003e\u003eBrowser: Rehydrate\n  Note over Browser: Interactive\n  DB--\u003e\u003e-Server: Reviews data\n  Server--\u003e\u003e-Browser: Chunk 2\n  Browser-\u003e\u003eBrowser: Render complete page\n  Note over Browser: Done\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdantrain%2Fremix-relay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdantrain%2Fremix-relay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdantrain%2Fremix-relay/lists"}