Restpollo - React Fetch Component
Tags: javascript, rest, api, fetch
Published: 2018-06-14 10:21:03

---
title: Restpollo - React Fetch Component
published: true
description: Declarative React components for communicating with REST API inspired by the awesome Apollo React library for GraphQL
tags: javascript, rest, api, fetch
---
![cover image](https://thepracticaldev.s3.amazonaws.com/i/eju37rmm70c11s5cy4wp.png)
---

>DISCLAIMER: Restpollo isn't an official Apollo project. They did such a good job with React Apollo that it inspired me to create a simplified version for communicating with a REST API using React components and function as children  pattern.

I don't hide the fact that I'm a **__HUGE__** fan of React ( [LINK](https://reactjs.org/) ), GraphQL ( [LINK](https://graphql.org/) ), Apollo ( [LINK](https://www.apollographql.com/) ) and Apollo's React components ( [LINK](https://www.apollographql.com/docs/react/) ).
When Apollo React rolled out version 2.1 they introduced components for querying, mutating and subscribing to a GraphQL backend… this blew me away!
Here's an example ( taken from Apollo React documentation - [LINK](https://www.apollographql.com/docs/react/react-apollo-migration.html) ):
```javascript
<Query query={GET_DOGS}>
  {({ loading, error, data }) => {
    if (error) return <Error />
    if (loading || !data) return <Fetching />

    return <DogList dogs={data.dogs} />
  }}
</Query>
```

Let's go over the code above in detail.

### **Query**
`<Query>` is a React Apollo component that takes in a GraphQL query as a prop and then starts to work it's magic.
It goes to the GraphQL backend and fetches the data we've requested ( defined in GET_DOGS in our example ), it also handles a couple of common states along the way:
**loading** - the request is sent but we haven't received a response yet
**error** - something went wrong trying to retrieve data
**data** - fetch data succeeded!

### **The cool part**
The really cool part about `<Query>` ( and other Apollo React components ) is how it handles rendering the UI with function as children pattern ( [LINK](https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9) ).
This means you get all of the yummy Apollo React functionality without it assuming how you want to render your data! Awesome!


---

# **REST meets Apollo**
Because I had so much fun with Apollo's React components I thought how great it would be if something like Apollo React existed for communicating with a REST API.
After an **__EXHAUSTING__** research session ( googled "apollo rest" and saw that the first result wasn't what I wanted ), I decided to build my own Apolloesque React components for REST API's!

>Is it derivative? Yes. Will I get sued by Apollo? Also yes but I'm hoping they think I'm cute and don't take legal actions <*fingers crossed*>

### **What's in the box?**
The hero of our story is `<Fetch>` which takes in 2 props 'url' and 'fetchOptions' and does it's magic will allowing you to write your own render logic using function as children, just like Apollo React.
The sidekicks to our hero are `<Get>`, `<Post>`, `<Put>` and `<Delete>` which are nothing more than syntactic sugar on top of `<Fetch>` that have defaults defined for common REST actions.
And now the goodies!
[Examples site link](https://irideveloper.github.io/restpollo/) - This is where you can see how the components work with some simple layout and styling
[Github link](https://github.com/IRIdeveloper/restpollo) - If you want to check out the code this is the link for you <*finger point emoji*>
[npm link](https://www.npmjs.com/package/react-restpollo) - c'mon you know what this is


---

# **The "Be my friend section"**
If you liked this post and want to be friends with me, ya know, chat online or grab a beer or go on a life changing adventure that will bond us for the rest of our lives, you can find me on here:
[Github](https://github.com/IRIdeveloper)
[Linkedin](https://www.linkedin.com/in/gvozderacbojan/)
[Medium](https://medium.com/@bojangbusiness)
[Twitter](https://twitter.com/GvozderacBojan)