Simplify Data Fetching Using Async-React

In this post, I am going to talk about a new JavaScript library that I created. It is called async-react.

I think my library solves a problem of writing async code to grab data from an API especially when it comes to handling loading and error state.

Since I built this library using React, you can use it for your React apps or for your ReactNative apps. It works for both! 😃

The Magic of Async-React

Magic!

To use my library in your project you can install it from NPM as usual.

Install:

npm install --save async-react

Usage:

I took inspiration from React’s new context API and <Query /> component from react-apolloas you can see in the example.

<AsyncAwait path="https://jsonplaceholder.typicode.com/posts">
        {({ loading, error, data }) => {
          if (error) return <h2>{error}</h2>;
          if (loading) return <h2>Loading...</h2>;
          if (data) return <MyComponent data={data} />;
        }}
</AsyncAwait>

I used Promise.all internally so that I can take in an array of different URLs for path prop and return results in the same way.

<AsyncAwait
  path={[
    'https://jsonplaceholder.typicode.com/posts',
    'https://jsonplaceholder.typicode.com/users'
  ]}
>
  {({ loading, error, data }) => {
    if (error) return <h2>{error}</h2>;
    if (loading) return <h2>Loading...</h2>;
    if (data) return <MyComponent posts={data[0]} users={data[1]}/>;
  }}
</AsyncAwait>

I thought I should add a feature to accept a base URL when the app starts. I prefer less typing 😜.

// App.js
<AsyncAwaitProvider baseUrl="https://jsonplaceholder.typicode.com">
     <AnotherComponent />
</AsyncAwaitProvider>
// AnotherComponent.js
<AsyncAwait path={['/posts', '/users']}>
        {({ loading, error, data }) => {
          if (error) return <h2>{error}</h2>;
          if (loading) return <h2>Loading...</h2>;
          if (data) 
             return <MyComponent posts={data[0]} users=data[1]} />;
        }}
</AsyncAwait>

<AsyncAwaitProvider> uses React’s context API internally. That’s how I was able to pull in the baseURL from the provider component. This component receives only one prop: baseUrl, as a string.

Just as shown in the first example, you can do path='/post' or even you can do path={['/post']}. The path prop accepts both, array and string.

Cheatsheet for async-react:

• imports : import AsyncAwaitProvider, {AsyncAwait} from ‘async-react’;
• AsyncAwaitProvider: Top level wrapper that has only one prop, baseUrl of type string. Use this if you would like to configure your endpoint’s absolute URL once and omit it elsewhere.
• AsyncAwait: It works like the<Query /> component from react-apollo. It takes in only one prop: path, of type either string or an Array.

That’s it. I hope you enjoyed reading my blog. Here is a link to the package source https://github.com/redacademy/async-react. Feel free to create any issues or pull requests on github. Thank you for reading! 😄

Happy Coding!

If you liked this post and want to keep learning about web and app development with RED Academy, be sure to follow us on Medium or check out our website.