https://github.com/capthiron/graphql-request-react

React wrapper for graphql-request
https://github.com/capthiron/graphql-request-react

client fetch graphql react reactjs request wrapper

Last synced: about 2 hours ago
JSON representation

React wrapper for graphql-request

• Host: GitHub
• URL: https://github.com/capthiron/graphql-request-react
• Owner: capthiron
• License: mit
• Created: 2019-04-08T08:55:20.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-04-10T20:36:10.000Z (over 5 years ago)
• Last Synced: 2024-01-03T00:18:45.765Z (11 months ago)
• Topics: client, fetch, graphql, react, reactjs, request, wrapper
• Language: JavaScript
• Homepage: https://bit.dev/capthiron/graphql-request-react/demo
• Size: 203 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# graphql-request-react

[![npm version](https://badge.fury.io/js/graphql-request-react.svg)](https://badge.fury.io/js/graphql-request-react)

React wrapper for [graphql-request](https://www.npmjs.com/package/graphql-request). 💣

## Install

`yarn add graphql-request-react`

or

`npm install graphql-request-react`

## Quickstart

Send a GraphQL query to render an image of Pikachu ⚡. [Try the demo ➡](https://bit.dev/capthiron/graphql-request-react/demo)

```jsx

const App = () => {

  const url= 'https://graphql-pokemon.now.sh'

  

  const query = `{

    pokemon(name: "Pikachu") {

      image

    }

  }`

  return (

     

        

      }

    />

  )

}

```

## 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 (

   

      

    }

  />

)

```

#### Adding HTTP header

```jsx

 

    

  }

/>

```

#### Handling Loading

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

```jsx

 

    

  }

  /*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

 

    

  }

  /*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 the requested `data` passed in 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](https://www.npmjs.com/package/fetch#options) like http-headers. | Object   |

#### More coming soon...

- Example for mutations

- Trigger function