Graphql-request-react NPM

graphql-request-react

React wrapper for graphql-request. 💣

Install

Yarn:

yarn add graphql-request-react

Npm:

npm install graphql-request-react

Quickstart

Send a GraphQL query to render an image of Pikachu ⚡. Try the demo ➡

const App = () => {
  const url= 'https://graphql-pokemon.now.sh'
  
  const query = `{
    pokemon(name: "Pikachu") {
      image
    }
  }`

  return (
    <Request url={url} query={query}
      render={data => 
        <img alt={"pokemon"} src={data.pokemon.image}/>
      }
    />
  )
}

Import

import Request from 'graphql-request-react'

Examples

Providing variables for a query

const query = `getPokemon($name: String!) {
  pokemon(name: $name) {
    image
  }
}`

return (
  <Request url={url} query={query}
    /*Add variables object with the variable values*/
    variables={ {name: "Pikachu"} }
    render={data => 
      <img alt={"pokemon"} src={data.pokemon.image}/>
    }
  />
)

Adding HTTP header

<Request url={url} query={query}
  /*Add an options object with appropriate HTTP headers*/
  options={ {headers: {authorization: 'AUTH_TOKEN'}} }
  render={data => 
    <img alt={"pokemon"} src={data.pokemon.image}/>
  }
/>

Handling Loading

You can add a loading function that will be used for rendering during the fetching process.

<Request url={url} query={query}
  render={data => 
    <img alt={"pokemon"} src={data.pokemon.image}/>
  }
  /*Add loading function*/
  loading={() => <h4>Loading Pikachu from Pokedex...</h4>}
/>

Handling Errors

You can add a error function that will be used for rendering in case of an error.

<Request url={url} query={query}
  render={data => 
    <img alt={"pokemon"} src={data.pokemon.image}/>
  }
  /*Add error function*/
  error={(err) => <h4>Couldn't find Pikachu in Pokedex because of {err.message}!</h4>}
/>

Props

Name	Required	Description	Type
`url`	Yes	Url of the graphql endpoint	String
`query`	Yes	Graphql query	String
`render`	Yes	Render function that gets passed in the requested `data` as an object	Function
`loading`	No	Render function during loading stage	Function
`error`	No	Render function in case of an error	Function
`variables`	No	Object that provides the variables to a given query	Object
`options`	No	Object that contains fetch options like http-headers.	Object