Fetching and Displaying Data in a React-Flask Application

In the preceding chapter, you were able to successfully integrate the React frontend into the Flask backend. This is a significant milestone in the journey of a full stack web developer. In this chapter, you will build on what you have learned and dive deeper into data fetching in a full stack web application.

Data fetching is important in a web application because it allows the application to retrieve data from a backend server, API, or database and display that data to a user. Without the ability to fetch data, a web application would be limited to displaying only hardcoded data, which would not be very useful or dynamic. By fetching data from a backend server or API, the application can display up-to-date, dynamic data to the user.

In addition, data fetching is often used in combination with user interactions and updates to the data, allowing the application to perform actions such as inserting, updating, or deleting...

Technical requirements

The The complete code for this chapter is available on GitHub at: https://github.com/PacktPublishing/Full-Stack-Flask-and-React/tree/main/Chapter11.

Owing to the page-count constraints, some of the code blocks have been snipped. Please refer to GitHub for the complete code.

Fetching and displaying data – the React-Flask approach

In this chapter, first, we will be fetching data on speakers and displaying it to the users of the application. But before heading into that, let’s do some code restructuring. You will need to restructure the backend to accommodate the growing app.py file contents in the project directory. Dividing the code into different components improves the overall structure and organization of the application.

Rather than having the entire code in a single module, you can structure your code to separate concerns. We’ll discuss more on code structuring for larger applications in Chapter 14, Modular Architecture – The Power of Blueprints. With this code split, developers can easily locate and modify specific parts of the code base without affecting other components. This modular approach also promotes code reusability.

Now, back to the code, you will add models.py to the backend project directory (bizza/backend...

Adding data to a database – the React–Flask approach

We add data to a database to store and organize information that can be easily accessed, managed, and updated. It is one of the ways to persistently store data, and knowing how to do it is a key requirement for any full stack developer. This knowledge allows you to build dynamic and interactive web applications. You then have the means to efficiently retrieve and use the data for various purposes, such as reporting, analysis, and decision making.

Adding data to Flask

Now, let’s create an endpoint to handle the logic for adding speaker data to the database:

    @app.route('/api/v1/speakers', methods=['POST'])    def add_speaker():
        data = request.get_json()
        name = data.get('name')
        email = data...

Editing data – the React–Flask approach

In addition to displaying and adding data, it’s also important for a web application to allow the user to edit data. In this section, you will learn how to implement data editing in a React-Flask web application.

Editing data in Flask

Now, let’s add the endpoint to handle the logic for updating the speaker data in the database. Add the following code to app.py:

from flask import jsonify, requestfrom werkzeug.utils import secure_filename
@app.route('/api/v1/speakers/<int:speaker_id>',
    methods=['PUT'])
def update_speaker(speaker_id):
    data = request.get_json()
    name = data.get('name')
    email = data.get('email')
    company = data.get('company')
    position = data.get('position')
    bio = data...

Deleting data from a database – the React–Flask approach

Deleting data from a database involves removing one or more records or rows from a table. In this section, you are going to learn how to handle delete requests in a React–Flask web application.

Handling delete requests in Flask

Let’s create the endpoint to handle the logic for deleting speaker data from the database:

@app.route('/api/v1/speakers/<int:speaker_id>',    methods=['DELETE'])
def delete_speaker(speaker_id):
    speaker = Speaker.query.get_or_404(speaker_id)
    if not current_user.has_permission("delete_speaker"):
        abort(http.Forbidden("You do not have permission to
            delete this speaker"))
    events =
      ...

Managing pagination in a React–Flask application

When working with a large dataset, it’s important to implement pagination to make the large dataset more manageable for the user. Pagination is a technique used to divide a large set of data into smaller, more manageable chunks called pages. Each page contains a subset of the total data, allowing users to navigate through the data in a controlled manner.

Pagination provides a way to present large datasets efficiently, improves performance, and enhances the user experience by making data more accessible. In this section, you will learn how to implement pagination in a React–Flask web application. To implement pagination, you will need to make some changes to the backend server to handle pagination requests.

You can use the Flask-SQLAlchemy library to handle pagination on the backend. On the Flask backend, you can implement pagination for the speaker model using the Flask-SQLAlchemy library’s pagination...

Summary

In this chapter, we discussed in detail how you can fetch and display data in a React–Flask web application. We examined one of the ways fetching and displaying data is handled. You were able to work from the backend in defining the Speaker model class and implement various endpoints to handle data fetching from the database, and adding, updating, and deleting data on it.

We used the Axios library to send a request to the Flask backend, which then retrieved the data from a database and returned it to the frontend in a response. The React frontend then processed the response and displayed the data to the end user. Lastly, we implemented pagination as a way to present large datasets efficiently and to improve the performance of React–Flack web application projects.

Next, we are going to discuss authentication and authorization in a React–Flask application and examine the best practices to ensure that your application is secure and ready for production...