{"id":13725411,"url":"https://github.com/dabit3/graphql-suspense","last_synced_at":"2025-11-17T15:10:48.820Z","repository":{"id":73190991,"uuid":"169656602","full_name":"dabit3/graphql-suspense","owner":"dabit3","description":"Lightweight component that allows you to interact with a GraphQL API using React Suspense","archived":false,"fork":false,"pushed_at":"2019-02-08T15:58:34.000Z","size":61,"stargazers_count":65,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-10-11T09:16:55.007Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/dabit3.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":"2019-02-07T23:03:48.000Z","updated_at":"2022-01-01T21:14:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"21fbaba3-56a0-439f-951f-0cffdfc9a8fb","html_url":"https://github.com/dabit3/graphql-suspense","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dabit3/graphql-suspense","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Fgraphql-suspense","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Fgraphql-suspense/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Fgraphql-suspense/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Fgraphql-suspense/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dabit3","download_url":"https://codeload.github.com/dabit3/graphql-suspense/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Fgraphql-suspense/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":284903805,"owners_count":27082114,"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","status":"online","status_checked_at":"2025-11-17T02:00:06.431Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-08-03T01:02:22.314Z","updated_at":"2025-11-17T15:10:48.790Z","avatar_url":"https://github.com/dabit3.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# GraphQL Suspense\n\nEasily add suspense to your GraphQL app.\n\n\u003e Warning, the [React docs](https://reactjs.org/docs/react-api.html#reactsuspense) say that Suspense does not yet support data loading, so in the future there may be breaking changes \u0026 better options available. This is experimental, feel free to send prs for improvements.\n\n![](header.jpg)\n\n## Install\n\n```sh\nyarn add graphql-suspense\n\n# or\n\nnpm install graphql-suspense\n```\n\n## Usage ([Apollo](https://www.apollographql.com/docs/react/))\n\n```js\nimport React, { Component, Suspense } from 'react'\nimport gqlsuspense from 'graphql-suspense'\n\n// Define Apollo client\nconst client = new ApolloClient({\n  uri: \"\u003cSOMEURI\u003e\"\n})\n\nclass Data extends React.Component {\n  render() {\n    const data = gqlsuspense(client.query, { query: listTodos })\n    return data.data.listTodos.items.map((t, i) =\u003e \u003cp key={i}\u003eYo! {t.name}\u003c/p\u003e)\n  }\n}\n\nconst App = () =\u003e (\n  \u003cSuspense fallback={\u003cdiv\u003eloading...\u003c/div\u003e}\u003e\n    \u003cData /\u003e\n  \u003c/Suspense\u003e \n)\n```\n\n## Usage ([AWS Amplify](https://aws-amplify.github.io/))\n\n```js\nimport React, { Component, Suspense } from 'react'\nimport gqlsuspense from 'graphql-suspense'\nimport { API, graphqlOperation } from 'aws-amplify'\n\nclass Data extends React.Component {\n  render() {\n    const data = gqlsuspense(API.graphql(graphqlOperation(listTodos)))\n    return data.data.listTodos.items.map((t, i) =\u003e \u003cp key={i}\u003eYo! {t.name}\u003c/p\u003e)\n  }\n}\n\nconst App = () =\u003e (\n  \u003cSuspense fallback={\u003cdiv\u003eloading...\u003c/div\u003e}\u003e\n    \u003cData /\u003e\n  \u003c/Suspense\u003e \n)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabit3%2Fgraphql-suspense","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdabit3%2Fgraphql-suspense","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabit3%2Fgraphql-suspense/lists"}