Many to Many Relationship and Flask meet React

Today we’re going to be talking about many to many relationships in Flask and connecting that with React, When and where to use them and how they should be declared depending on which actions that you want your database to be able to handle.

For starters, many to many relationships are joined together with join tables. Join tables are used to connect 2 tables together via foreign keys. There are 2 methods of doing so either connect the tables using db.Table() or create a class table. When trying
to conclude when to use db.Table() vs creating an entire new class comes into play if you are wanting a submittable attribute inside the Join table.

For Example,

``

Teacher_student = db.Table('teacher_students',

db.Column('teacher_id', db.Integer, db.ForeignKey('teachers.id'), primary_key=True),

db.Column('student_id', db.Integer, db.ForeignKey('students.id'), primary_key=True),

)

`

This join table's sole purpose is to connect the tables “teachers” and “students” to have a many to many relationship. As you can see besides foreign keys there are no other submittable attributes. If you are looking too add said attribute to your Join table
then it would be best to create a new class that holds your foreign keys and the attribute, such as,

`

Class Teacher_student(db.Model){

tablename = ‘teacher_students’

Id = db.Column(db.Integer, primary_key = True)

db.Column('teacher_id', db.Integer, db.ForeignKey('teachers.id')),

db.Column('student_id', db.Integer, db.ForeignKey('students.id')),

Attr = db.Column(db.String)

}

`

This example of a Join table has both the foreign keys and the attribute that allows a user to be able to submit some type of data that the database can connect back to both tables that share a many to many relationship.

Now, time to connect all this to our frontend! You should be somewhat familiar setting up your database and connecting that with your frontend already; but here we are strictly talking about setting up some kind of form that will need to be submitted by the user that will append data to our backend many to many table. For example you use Formik if you want speed that process up of creating a simple form just to test the difference in the above examples. If you are not aware of how to set up Formik in your environment
you can reference there official website here Formik:

Tutorial | Formik

Learn how to build forms in React with Formik.

  <div class="color-secondary fs-s flex items-center">
      <img
        alt="favicon"
        class="c-embed__favicon m-0 mr-2 radius-0"
        src="https://formik.org/images/favicon.png"
        loading="lazy" />
    formik.org
  </div>
</div>

.

You might be asking, Why would do I need to use Many to many relationship in code? or Why do I need to care how to implement things to a frontend? The reason why it is important to use many to many relationship is because when working with data and databases, everything needs a place to go. Sometimes those places need to be associated with different tables in the databases so when users or programmers need to search for certain data they can have multiple ways of searching that while still following single source of truth. As to why you need to know how to connect these things to a frontend is simply because the users need someplace to be able to see the data themselves as they will not have access to the actual data bases that you will create.

In conclusion, Many-to-many relationships in Flask are crucial for building complex applications where entities have interconnected data. They allow for efficient modeling of real-world scenarios, such as users participating in multiple events or items belonging to various categories. Using SQLAlchemy, developers can define these relationships with association tables, ensuring scalability and flexibility in database design. This structure reduces redundancy and improves data integrity by avoiding the need to store duplicate information. Ultimately, many-to-many relationships empower developers to handle dynamic, interconnected data, making Flask applications more versatile and capable of managing diverse user interactions and associations.