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 ), GraphQL ( LINK ), Apollo ( LINK ) and Apollo's React components ( LINK ).
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 ):
<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 ).
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 - This is where you can see how the components work with some simple layout and styling
Github link - If you want to check out the code this is the link for you <finger point emoji>
npm link - 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
Linkedin
Medium
Twitter
Top comments (0)