{"id":20908684,"url":"https://github.com/capthiron/graphql-request-react","last_synced_at":"2026-05-02T23:42:26.035Z","repository":{"id":57253593,"uuid":"180109122","full_name":"capthiron/graphql-request-react","owner":"capthiron","description":"React wrapper for graphql-request","archived":false,"fork":false,"pushed_at":"2019-04-10T20:36:10.000Z","size":208,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-20T21:47:31.233Z","etag":null,"topics":["client","fetch","graphql","react","reactjs","request","wrapper"],"latest_commit_sha":null,"homepage":"https://bit.dev/capthiron/graphql-request-react/demo","language":"JavaScript","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/capthiron.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}},"created_at":"2019-04-08T08:55:20.000Z","updated_at":"2019-04-18T15:54:14.000Z","dependencies_parsed_at":"2022-08-31T22:20:27.658Z","dependency_job_id":null,"html_url":"https://github.com/capthiron/graphql-request-react","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capthiron%2Fgraphql-request-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capthiron%2Fgraphql-request-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capthiron%2Fgraphql-request-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capthiron%2Fgraphql-request-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/capthiron","download_url":"https://codeload.github.com/capthiron/graphql-request-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243301128,"owners_count":20269286,"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":["client","fetch","graphql","react","reactjs","request","wrapper"],"created_at":"2024-11-18T14:08:26.799Z","updated_at":"2026-05-02T23:42:20.998Z","avatar_url":"https://github.com/capthiron.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# graphql-request-react\n\n[![npm version](https://badge.fury.io/js/graphql-request-react.svg)](https://badge.fury.io/js/graphql-request-react)\n\nReact wrapper for [graphql-request](https://www.npmjs.com/package/graphql-request). 💣\n\n\n## Install\n`yarn add graphql-request-react`\n\nor\n\n`npm install graphql-request-react`\n\n## Quickstart\nSend a GraphQL query to render an image of Pikachu ⚡. [Try the demo ➡](https://bit.dev/capthiron/graphql-request-react/demo)\n\n```jsx\nconst App = () =\u003e {\n  const url= 'https://graphql-pokemon.now.sh'\n  \n  const query = `{\n    pokemon(name: \"Pikachu\") {\n      image\n    }\n  }`\n\n  return (\n    \u003cRequest url={url} query={query}\n      render={data =\u003e \n        \u003cimg alt={\"pokemon\"} src={data.pokemon.image}/\u003e\n      }\n    /\u003e\n  )\n}\n```\n\n## Import\n```jsx\nimport Request from 'graphql-request-react'\n```\n\n## Examples\n#### Providing variables for a query\n```jsx\nconst query = `getPokemon($name: String!) {\n  pokemon(name: $name) {\n    image\n  }\n}`\n\nreturn (\n  \u003cRequest url={url} query={query}\n    /*Add variables object with the variable values*/\n    variables={ {name: \"Pikachu\"} }\n    render={data =\u003e \n      \u003cimg alt={\"pokemon\"} src={data.pokemon.image}/\u003e\n    }\n  /\u003e\n)\n```\n\n#### Adding HTTP header\n```jsx\n\u003cRequest url={url} query={query}\n  /*Add an options object with appropriate HTTP headers*/\n  options={ {headers: {authorization: 'AUTH_TOKEN'}} }\n  render={data =\u003e \n    \u003cimg alt={\"pokemon\"} src={data.pokemon.image}/\u003e\n  }\n/\u003e\n```\n\n#### Handling Loading\nYou can add a loading function that will be used for rendering during the fetching process.\n```jsx\n\u003cRequest url={url} query={query}\n  render={data =\u003e \n    \u003cimg alt={\"pokemon\"} src={data.pokemon.image}/\u003e\n  }\n  /*Add loading function*/\n  loading={() =\u003e \u003ch4\u003eLoading Pikachu from Pokedex...\u003c/h4\u003e}\n/\u003e\n```\n\n#### Handling Errors\nYou can add a error function that will be used for rendering in case of an error.\n```jsx\n\u003cRequest url={url} query={query}\n  render={data =\u003e \n    \u003cimg alt={\"pokemon\"} src={data.pokemon.image}/\u003e\n  }\n  /*Add error function*/\n  error={(err) =\u003e \u003ch4\u003eCouldn't find Pikachu in Pokedex because of {err.message}!\u003c/h4\u003e}\n/\u003e\n```\n\n## Props\n| Name        | Required | Description                                                                                          | Type     |\n|-------------|----------|------------------------------------------------------------------------------------------------------|----------|\n| `url`       | **Yes**  | Url of the graphql endpoint                                                                          | String   |\n| `query`     | **Yes**  | Graphql query                                                                                        | String   |\n| `render`    | **Yes**  | Render function that gets the requested `data` passed in as an object                                | Function |\n| `loading`   | No       | Render function during loading stage                                                                 | Function |\n| `error`     | No       | Render function in case of an error                                                                  | Function |\n| `variables` | No       | Object that provides the variables to a given query                                                  | Object   |\n| `options`   | No       | Object that contains [fetch options](https://www.npmjs.com/package/fetch#options) like http-headers. | Object   |\n\n#### More coming soon...\n- Example for mutations\n- Trigger function\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcapthiron%2Fgraphql-request-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcapthiron%2Fgraphql-request-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcapthiron%2Fgraphql-request-react/lists"}