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 ➡

``jsx
const App = () => {
const url= 'https://graphql-pokemon.now.sh'

const query = {
pokemon(name: "Pikachu") {
image
}
}

return (
render={data =>

}
/>
)
}
`

Import


`jsx
import Request from 'graphql-request-react'
`

Examples

#### Providing variables for a query
`jsx
const query = getPokemon($name: String!) {
pokemon(name: $name) {
image
}
}

return (
/Add variables object with the variable values/
variables={ {name: "Pikachu"} }
render={data =>

}
/>
)
`

#### Adding HTTP header
`jsx
/Add an options object with appropriate HTTP headers/
options={ {headers: {authorization: 'AUTH_TOKEN'}} }
render={data =>

}
/>
`

#### Handling Loading
You can add a loading function that will be used for rendering during the fetching process.
`jsx
render={data =>

}
/Add loading function/
loading={() =>

Loading Pikachu from Pokedex...

}
/>
`

#### Handling Errors
You can add a error function that will be used for rendering in case of an error.
`jsx
render={data =>

}
/Add error function/
error={(err) =>

Couldn't find Pikachu in Pokedex because of {err.message}!

}
/>
`

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