graphql-request-react

graphql-request-react

React wrapper for graphql-request. 💣

Install

Yarn:

yarn add graphql-request-react

or

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

More coming soon...

• Example for mutations
• Trigger function