DEV Community: Ruben Salazar

The Dreaded Headache of Recursion in Database Serialization — And How to Fix It

Ruben Salazar — Wed, 11 Jun 2025 03:33:12 +0000

If you’ve worked on building web applications that involve relational databases, you’ve probably faced a common and frustrating problem: recursive data serialization. It often rears its ugly head when you try to convert your database models into JSON for APIs or frontend consumption — and suddenly your app crashes, throws errors, or just spirals into an infinite loop.
In this post, we’ll dive into why this happens, how to design your database and serialization logic to avoid it, and what to do if you hit a dead end.

Why Recursion Happens in Serialization
Relational databases inherently contain relationships. You might have tables like Users, Posts, and Comments, where:
• A User has many Posts
• A Post belongs to a User and has many Comments
• A Comment belongs to a Post and a User
When you ask your ORM (Object-Relational Mapper) to serialize a User, it might include all their Posts — which in turn includes each Post’s Comments — which includes the Comment’s User — which again includes all that User’s Posts — and so on.
This circular referencing causes recursive serialization, where the data tries to expand indefinitely.

Mapping Out Your Database to Prevent Recursion
The first step is careful planning of your relationships and how you serialize them:
• Know your relationship directions: Understand which relationships are one-way and which are bi-directional.
• Set clear serialization rules: Most ORMs allow you to exclude certain relationships from serialization to break the recursion loop.
• Use serialization mixins or tools: Libraries like SQLAlchemy’s SerializerMixin let you specify which relationships to include or exclude when converting to JSON.
For example, in SQLAlchemy, if you have a User with a listings relationship and a Listing with a user relationship, serializing both fully can cause a loop. You can exclude Listing.user when serializing User.listings to avoid this.

Targeted Serialization: Pick What You Really Need
If excluding some relationships isn’t enough, or the structure is too complex, the safest bet is to serialize only the specific data fields or relationships your frontend actually needs. This approach:
• Reduces data size over the wire
• Avoids accidental recursive loops
• Gives you control over API output
You can create custom serialization methods on your models that output plain dictionaries with only necessary fields, or use dedicated serializers like Marshmallow or Pydantic.

When You’re Stuck: Tips to Untangle Serialization
• Trace your relationships: Draw your tables and their foreign keys. Visualizing the graph helps identify loops.
• Test serialization step by step: Serialize just one model at a time, then add relationships gradually.
• Use debugging tools: Many ORMs and serializers provide hooks or logging to see exactly what data is being traversed.
• Fallback to manual serialization: If your ORM’s automatic serialization is too complex, write explicit JSON-building code.

Final Thoughts
Recursive serialization headaches are common in complex apps, but they’re manageable with the right approach:
1 Plan your database relationships carefully to minimize cycles.
2 Use serialization rules or mixins to exclude or limit nested data.
3 Explicitly serialize only the data your UI needs.
If you take these steps, your API responses will be efficient, safe from infinite loops, and easier to maintain.

[Boost]

Ruben Salazar — Wed, 11 Jun 2025 02:43:52 +0000

🎵 Building Many-to-Many Relationships in Flask: A Music Shed Case Study

Ruben Salazar — Thu, 01 May 2025 17:24:15 +0000

Flask is a lightweight Python web framework that makes building RESTful APIs fast and intuitive. One of the common patterns you'll encounter when building applications with Flask and SQLAlchemy is the many-to-many relationship. In my project, Music Shed, I used Flask to build the backend for a lesson booking platform where students can connect with teachers for music lessons.

Let’s walk through how Flask and SQLAlchemy helped bring this relationship to life.

What Is a Many-to-Many Relationship?
In a typical many-to-many setup, one item can be associated with many other items — and vice versa. In Music Shed, a student can book lessons with multiple teachers, and a teacher can teach multiple students. This relationship is best represented with a join table — in our case, it’s called appointments.

How We Built It with Flask + SQLAlchemy
In models.py, we define three key models: Student, Teacher, and Appointment. Here's the simplified version:

python
Copy
Edit
class Student(db.Model):
# ...
appointments = db.relationship("Appointment", back_populates="student")
teachers = db.relationship("Teacher", secondary="appointments", back_populates="students")

class Teacher(db.Model):
# ...
appointments = db.relationship("Appointment", back_populates="teacher")
students = db.relationship("Student", secondary="appointments", back_populates="teachers")

class Appointment(db.Model):
# ...
student_id = db.Column(db.Integer, db.ForeignKey('students.id'))
teacher_id = db.Column(db.Integer, db.ForeignKey('teachers.id'))
lesson_datetime = db.Column(db.DateTime)

student = db.relationship("Student", back_populates="appointments")
teacher = db.relationship("Teacher", back_populates="appointments")

The appointments table acts as the bridge between students and teachers, holding additional info like lesson_datetime.

Flask Routes That Use the Relationship
Using Flask-RESTful, I created a POST /appointments route to let a student book a lesson:

python
Copy
Edit
class AppointmentList(Resource):
def post(self):
data = request.get_json()
new_appointment = Appointment(
student_id=data['student_id'],
teacher_id=data['teacher_id'],
lesson_datetime=datetime.fromisoformat(data['lesson_datetime'])
)
db.session.add(new_appointment)
db.session.commit()
return new_appointment.to_dict(), 201
When a student logs in, the frontend uses /students/:id/appointments to display all upcoming lessons — each joined with the teacher's info.

Wrapping Up
Flask and SQLAlchemy make it simple to model complex relationships like many-to-many. In Music Shed, we used this pattern to power a real-world booking system between students and music teachers.

If you're building your own Flask app, understanding how to model these connections will unlock a lot of flexibility in your design. 🎶

SQLite! Works Great! Less Filing! Why SQLite is an Easy and Efficient Way to Store Data in a Database

Ruben Salazar — Wed, 26 Feb 2025 16:41:03 +0000

Why SQLite is Great for Storing Data in a Database

If you're new to coding and you're wondering how to store data, you're probably thinking about databases. A database is a place where you can store, manage, and retrieve data efficiently. But when you're just starting out, managing a database can seem overwhelming. That's where SQLite comes in—it’s an easy-to-use, lightweight database that’s perfect for beginners. In this blog, let’s dive into why SQLite is a great choice for storing data, especially when you're just starting your coding journey.

What is SQLite?

At its core, SQLite is a relational database management system (RDBMS), which means it stores data in tables that can be related to each other. The key feature of SQLite is that it doesn’t require a separate server to run. This makes it super easy to set up and use. You don’t need to worry about installing and configuring complex software or maintaining an entire database server like with other databases (think MySQL or PostgreSQL). SQLite is embedded directly into your application, meaning everything is stored in a single file on your computer or device.

Simple Setup and No Server Required

One of the most attractive things about SQLite is how simple it is to get started. All you need is the SQLite software installed (which comes by default with Python and other programming languages). You don’t need to set up a server or worry about network connections—SQLite does everything locally in a single file. This means you can quickly start creating and manipulating databases without worrying about complicated setup procedures.

For example, you can use SQLite to create a database that stores the list of contacts, tasks, or even records of users in an application. It’s all about simplicity and convenience.

Ideal for Small to Medium Projects

If you’re building a small project or even a personal application, SQLite is perfect. Think about making an app where you need to save user data, or perhaps an app for tracking your expenses. SQLite is small, fast, and efficient for such use cases. You won’t need a large, complex system to handle data. SQLite is lightweight and does a fantastic job for apps that don’t need the overhead of a full-scale database server.

Easy to Learn

One of the best things about SQLite is that it’s a great learning tool for beginners. The database is based on SQL (Structured Query Language), which is the most popular language used to manage data in databases. SQL is simple to learn, and you can start writing queries to insert, update, or retrieve data from your database with just a few commands.

Here’s an example of creating a table and inserting data in SQLite:

import sqlite3

# Create a connection to a new database
conn = sqlite3.connect('example.db')
cursor = conn.cursor()

# Create a table
cursor.execute('''CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY, name TEXT, age INTEGER)''')

# Insert some data
cursor.execute('''INSERT INTO users (name, age) VALUES ('Alice', 30)''')

# Commit the transaction and close
conn.commit()
conn.close()

In just a few lines of code, you’ve created a table and inserted data into it. It's that simple!

Portable and Flexible

SQLite databases are stored in a single file, making them incredibly portable. If you want to move your data from one computer to another, you just need to copy the file. There’s no need to worry about data migration or complex setups. If you decide to change your project or even develop a mobile app, SQLite databases can easily be integrated into mobile platforms (like iOS and Android).

Conclusion

SQLite is a fantastic choice for those new to coding, and here's why: it’s simple to set up, easy to learn, lightweight, and perfect for small to medium-sized projects. You don’t need to deal with a complex database server or complicated setup steps. If you’re just starting out with databases, SQLite is the perfect tool to learn and grow your skills, all while storing data efficiently. So, give it a try in your next project—you’ll quickly see why it’s one of the most popular databases out there for beginners!

useEffect to Fetch and Go GET'em!

Ruben Salazar — Tue, 17 Dec 2024 00:12:23 +0000

Hey Y'all!
In this episode of React, What's That?!, We'll be discussing the simple use of a hook known as useEffect to help us run a side effect that will fetch us data from an API.

The fetch request that we will be using is called a GET request and it is used to simply get data from an API. The setup for a GET request is simple and straightforward. But before we "gets to GET'n", let's talk about useEffect.

First, what is useEffect. If you search the definition, you will find that useEffect is a Hook that allows you to perform side effects in your functional components. Ah, but what is a side effect, you ask? Well, side effects are, according to the internet, actions that affect something outside the scope of your component, like: Fetching data from an API, Updating the DOM directly, Setting up subscriptions or timers, and Interacting with browser APIs. Great!!

So first, let's establish what we want to do. How about render data from an API to the DOM. Simple yet elegant.

Step 1. import { useEffect, useState } from 'react'

Step 2. create your function.

function MyComponent() {
    return()
  }

Step 3. create the variables that will set the state.

       function MyComponent() {
         const [data, setData] = useState([])
           return()
            }

Step 4. useEffect!

     function MyComponent() {
       const [data, setData] = useState([])

     useEffect(() => {
       const fetch('example https://api')
                  .then((response)=> 
                     response.json())
                  .then((data)=> setData(data)
                   }, [])

How does useEffect work?
It takes two arguments:
A function that contains the side effect logic.
An optional dependency array.
The function runs after every render by default, but you can control when it runs using the dependency array.
If the dependency array is empty, the effect runs only once after the initial render.
If the dependency array contains values, the effect runs whenever one of those values changes.

In React, when you call a function like setData, you're typically using a state setter function provided by the useState hook. This function updates the state of a component, and React re-renders the component to reflect the new state.

Once that data has been fetched, then you will want to render the data to your DOM by using the Map() method within the return().

Step 5. Render to the DOM.

       return(
         <div>
           {data.map(item => (
              <p key={item.id}>{item.name}</p>
           ))}
         </div>
        )

If the data from the API has different key:value pairs, then you can render those different values using the, "item" object. Item.description, if there is a description, item.price, if there is a price, and so on.

This basic setup will render the data that was fetched from the API to your DOM. You can then use CSS to style it how you would like.

Rendering data to your DOM from an API really can't be simpler.

Cheers!

Hyperlinks: Quick and easy.

Ruben Salazar — Fri, 13 Dec 2024 20:08:17 +0000

In a world where so much of life is lived online, a sleek and efficient user experience is crucial.
It is important to get a user what they need as quickly and efficiently as possible. One of the ways this can be done is through Javascript's capability allowing for a user to append hyperlinks to the DOM without having to first build the tag in HTML.

For example, let's say that you have created a submit event that returns a web address from an API after a form has been submitted. In this instance, I created a search event which allowed users to enter a State in order to view a list of Breweries within that state. If all the user wanted was a list of returned web addresses appended to the DOM, that's great but what if you didn't want to have to make the client copy the returned web address and then go through the anguish of pasting it into the search bar. What if multiple values were returned and the client was on a phone and didn't have time to stop, copy and paste multiple values one at at time?

What if, you wanted to make the clients life even easier by returning an address that would take them to their destination with the click of a mouse. "Make the clients life even easier?!", you ask. YES!

I was able to improve the client experience with the return of a single click web address.

Initially I had built a submit event that returned the web address to a list a breweries in any given state in the U.S.A. However, initially what I was able to return was an address but it was not hyperlinked, which wasn't bad but it wasn't great either. Because it is the developer's job to create the best client experience within a given scope, within my function that made it possible to submit a form, I created the beloved tag.

Below is a function that allows a user to submit a state, Texas, California, etc, and return a hyperlink to a website of a brewery located within that particular state.

function submitState(breweryUrl){
const div = document.createElement('div')

I already had the submit event created and appending to the DOM but without the tag, I wasn't getting back what I needed and that is a hyperlink. A functional

hyperlink cannot exist without an tag in Javascript.

item 1 let aTag = document.createElement('a')

let btn = document.createElement('button')
btn.addEventListener('click', handleDelete)
btn.textContent = 'x'

Once I created the the tag element, I needed to make the textContent of the aTag, dynamic because I would be returning any number of web addresses from many different breweries.

item 2 aTag.textContent = ${breweryUrl}

Then, in order for the tag to function properly, an href (hyperlink reference) element needed to be created and appended to the div that housed the Url Container.

item 3 aTag.href = breweryUrl

Once all that was done, then I used appendChild to append the aTag to the div since the tag would be a child to the parent element, div.

item 4 div.appendChild(aTag) div.appendChild(btn)

Last but not least, using a querySelector to find the Url Container, I was able to then append the div that contains the tag to the div with an id of url_conatiner.

item 5 document.querySelector('#url_container').append(div) }

After that, returning a hyperlink to the web sites of various breweries was then possible and the brewery locating world was a better place.

This is my first blog and I'm new to the community. I would greatly appreciate any feedback/constructive criticism so that I can better participate and contribute to the culture.

CHEERS!

Ruben Salazar