How & Where To Fetch Data In Your React Projects

easybase blog splash image

1/5/2021 Update: Featured articles in conclusion.


Introduction

React is one of the most useful and mature frontend libraries available today. It has given developers the ability to spin-up production applications across a broad range of devices. At some point, developers will likely need to be able to fetch data from a secure, remote source. Manually setting up a backend for a react project can be difficult. You’ll probably have to learn DBMS architecture and manually setup your stack. Plus you have to securely handle authentication between the frontend and backend. Furthermore, managing a full-stack platform can be extremely time-consuming and inefficient for teams of less than four developers.

Thankfully, serverless technology has gained a lot of popularity over the last five years. According to CloudFlare.com, “Serverless computing is a method of providing backend services on an as-used basis. A serverless provider allows users to write and deploy code without the hassle of worrying about the underlying infrastructure”. The rise in popularity of this technology comes to the benefit of developers by making the overhead of an enterprise backend extremely low. Now, you can deploy full-stack applications without having to setup and micromanage your application’s data store.

Today, Easybase has proven to be one of the best free serverless platforms for React applications. It features a realtime serverless database, user authentication, quick integration, live analytics, and much more. Let’s take a look at how we can get this up-and-running.


Walkthrough

1. Populate an Easybase table with data

If you already have a table with relevant data, feel free to skip this step. If not, log in to easybase and create a table. There are a variety of ways to populate your table. You could manually add rows by expanding the speed dial on the top-left and clicking the pencil icon.

easybase fetch image 1

Otherwise, you can upload a JSON or CSV file (Excel and Google Sheets can export to these files). This can be accomplished by expanding the speed dial and clicking the upload button. From there, drag in your file. Note that you have to make sure the column names between your easybase table and file match up.


2. Install easybase-react

Navigate to your react project and install the easybase-react library:

npm install easybase-react

For more information at this library take a look at the Github page or the docs. If you don’t have an existing React project use create-react-app to quickly create one with the proper configuration. You can do this by executing npx create-react-app MyApp.


3. Pass ebconfig.js token to React root

The only configuration needed from your React project is a token that is obtained from Easybase. There are two different methods to do this. If your goal is just to be able to access (read/write) data from a single table with no user authentication; navigate to the ‘integrations’ tab, hover ‘framework’, and click React. this will create a new table-specific React integration. From there, you can enable read/write and testing mode in the integration drawer on the right.

easybase fetch image 1

On the other hand, if your goal is to have full serverless capability (user authentication, custom permissions, etc.); navigate to the ‘projects’ page, create a new project with a distinct ID, expand the project row, and click ‘Download’ under the token header. Make sure you click the checkboxes for the tables you want the project to have permissions to.

easybase fetch image 1

Now, place that token in your project directory (src/) and wrap your root component in EasybaseProvider with your ebconfig.js token as a prop:

import { EasybaseProvider, useEasybase } from "easybase-react";
import ebconfig from "./ebconfig";

function App() {
  return (
    <EasybaseProvider ebconfig={ebconfig}>
      <Container />
    </EasybaseProvider>
  );
}


4. Interface with Frame()

All child components now have valid access to the useEasybase() hook. You initialize the Frame() as follows:

function Container() {
  const { Frame, configureFrame, sync } = useEasybase();

  useEffect(() => {
    configureFrame({ limit: 10, offset: 0 });
    sync(); // Now frame has 10 elements starting at index 0.
  }, []);

  const onChange = (index, column, newValue) => {
      Frame(index)[column] = newValue;
      sync();
  }

  return (
    <div style={ { display: "flex", flexDirection: "column" } }>
      {Frame().map(ele => 
        <Card
            frameEle={ele}
            onChange={onChange}
            index={index}
        />)}
    </div>
  )
}

Let’s briefly explain the Frame() function. Calling Frame() will return a stateful database array according to the parameters in configureFrame().

Important Note: If you are using a project, you must pass the table name in the configureFrame({ tableName }) method.

You can interface with Frame() as would a plain array of objects in javascript. Whenever you want to synchronize changes between your array and the remote database, just call the sync() function. This will handle any direct modifications to the objects in Frame() and re-render your component if needed. Remote changes will be synced to the client and local changes will be synced with the database.

P.S. Check the usage page in Easybase to view live-updated analytics on your project or integration, including volume and transfer loads.


5. Happy Hacking!

Just like that, your project is now properly setup with a realtime data store that can be statefully accessed from any of your components.

The useEasybase() hook provides access to multiple useful functions. For example, let’s take a look at Easybase’s visual queries. Head to the ‘Query’ tab in your table and draw up something with the provided GUI. When you’re done save it with a unique name. Now in your frontend application, you can use the query() function to call that by query name. No more need for complicated DBMS query language! This is just one of the low-code features that separate Easybase from other services when it comes to ease-of-use.


Conclusion

Where to fetch data from in a React project is a common question, especially for people deploying their first production application. We covered how to use Easybase to instantly implement a serverless data platform that can be deployed for free. For more information about React databases take a look here, or for information on user authentication with Easybase head here.

Also, check out my recently published article in Hackernoon about writing effective READMEs.

For any other questions or concerns feel free to use the ‘leave a message’ form below! I’ll be sure to get back to you. Thanks for reading and have a great day!