DEV Community

Bojan Gvozderac
Bojan Gvozderac

Posted on

 

Restpollo - React Fetch Component

cover image

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>
Enter fullscreen mode Exit fullscreen mode

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)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!