{"id":13998398,"url":"https://github.com/loop-payments/react-router-relay","last_synced_at":"2025-05-07T21:28:33.506Z","repository":{"id":180204572,"uuid":"664777357","full_name":"loop-payments/react-router-relay","owner":"loop-payments","description":"Relay entry point integration for react-router","archived":false,"fork":false,"pushed_at":"2025-04-07T18:30:56.000Z","size":935,"stargazers_count":25,"open_issues_count":6,"forks_count":4,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-04-07T18:42:00.366Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@loop-payments/react-router-relay","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/loop-payments.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2023-07-10T18:14:54.000Z","updated_at":"2025-04-07T15:55:04.000Z","dependencies_parsed_at":"2024-06-13T00:08:42.107Z","dependency_job_id":null,"html_url":"https://github.com/loop-payments/react-router-relay","commit_stats":null,"previous_names":["loop-payments/react-router-relay"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loop-payments%2Freact-router-relay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loop-payments%2Freact-router-relay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loop-payments%2Freact-router-relay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loop-payments%2Freact-router-relay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/loop-payments","download_url":"https://codeload.github.com/loop-payments/react-router-relay/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252956715,"owners_count":21831362,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-08-09T19:01:38.258Z","updated_at":"2025-05-07T21:28:33.494Z","avatar_url":"https://github.com/loop-payments.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# @loop-payments/react-router-relay\n\nUtilities and components to take advantage of Relay's preloaded queries when using react-router's data routers. This follows Relay's entrypoint pattern.\n\n## Usage\n\nEntrypoints work by defining the component, generally using a preloaded query, and a corresponding entrypoint.\n\n### MyPage.tsx\n\n```typescript\nimport type { SimpleEntryPointProps } from '@loop-payments/react-router-relay';\nimport { usePreloadedQuery, graphql } from 'react-relay';\n\nimport type MyPageQuery from './__generated__/MyPageQuery.graphql';\n\ntype Props = SimpleEntryPointProps\u003c{\n  query: MyPageQuery,\n}\u003e;\n\nexport default MyPage({ queries }: Props) {\n  const data = usePreloadedQuery(graphql`\n    query MyPageQuery($someId: ID!) @preloadable {\n      node(id: $someId) {\n        __typename\n      }\n    }\n  `, queries.query);\n\n  return \u003c\u003eYou found a {data.node?.__typename ?? 'nothing'}\u003c/\u003e;\n}\n```\n\n### MyPage.entrypoint.ts\n\n```typescript\nimport {\n  type SimpleEntryPoint,\n  JSResource,\n} from \"@loop-payments/react-router-relay\";\nimport nullthrows from \"nullthrows\";\n\nimport type MyPage from \"./MyPage\";\nimport MyPageQueryParameters from \"./__generated__/MyPageQuery$parameters\";\n\nconst entryPoint: SimpleEntryPoint\u003ctypeof MyPage\u003e = {\n  root: JSResource(\"MyPage\", () =\u003e import(\"./MyPage\")),\n  getPreloadProps({ params }) {\n    return {\n      queries: {\n        query: {\n          parameters: MyPageQueryParameters,\n          variables: {\n            someId: nullthrows(params.someId),\n          },\n        },\n      },\n    };\n  },\n};\n\nexport default entryPoint;\n```\n\n#### Note for Relay \u003c 16.2\n\nIf you're using relay prior to 16.2.0 you won't be able to use the `@preloadable` annotation and thus won't be able to generate `$parameters` files. You can still use entry points, but they'll need to import concrete request objects from the `.graphql` files instead.\n\n```ts\nimport MyPageQuery from \"./__generated__/MyPageQuery.graphql\";\n\nconst entryPoint: SimpleEntryPoint\u003ctypeof MyPage\u003e = {\n  root: JSResource(\"MyPage\", () =\u003e import(\"./MyPage\")),\n  getPreloadProps({ params }) {\n    return {\n      queries: {\n        query: {\n          parameters: MyPageQuery,\n          variables: {\n            someId: nullthrows(params.someId),\n          },\n        },\n      },\n    };\n  },\n};\n```\n\n### MyRouter.tsx\n\nYou need to use one of react-router's data routers and pre-process the routes via `preparePreloadableRoutes` before passing them into the router.\n\n```typescript\nimport {\n  type EntryPointRouteObject,\n  preparePreloadableRoutes,\n} from \"@loop-payments/react-router-relay\";\nimport { useMemo, useRef } from \"react\";\nimport { createBrowserRouter, RouterProvider } from \"react-router-dom\";\nimport { useRelayEnvironment } from \"react-relay\";\n\nimport MyPageEntryPoint from \"./MyPage.entrypoint\";\n\nconst MY_ROUTES: EntryPointRouteObject[] = [\n  {\n    path: \":someId\",\n    entryPoint: MyPageEntryPoint,\n  },\n];\n\nexport default function MyRouter() {\n  const environment = useRelayEnvironment();\n  // Potentially unnecessary if you never change your environment\n  const environmentRef = useRef(environment);\n  environmentRef.current = environment;\n\n  const router = useMemo(() =\u003e {\n    const routes = preparePreloadableRoutes(MY_ROUTES, {\n      getEnvironment() {\n        return environmentRef.current;\n      },\n    });\n\n    return createBrowserRouter(routes);\n  }, []);\n\n  return \u003cRouterProvider router={router} /\u003e;\n}\n```\n\n## Link\n\nThis package includes a wrapper around `react-router-dom`'s `Link` component. Using this component is optional. This adds a basic pre-fetch to the link that will load the JSResources for the destination on hover or focus events, and start fetching data on mouse down.\n\n## A note on JSResource\n\nLoading data for entrypoints depends on having a JSResource implementation to coordinate and cache loads of the same resource. This package does not depend on using the internal JSResource implementation if you wish to use a different one in your entrypoints.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floop-payments%2Freact-router-relay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Floop-payments%2Freact-router-relay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floop-payments%2Freact-router-relay/lists"}