prefetch_related in Django displaying all objects instad of related ones

Question

I am trying to get a list of all categories and below each category the list of all related articles.

The problem is that I am getting the list of all articles under each category. I read documentation and few answers but nothing seems to be working and I am not sure where I am making the mistake.

models.py

class Category(models.Model):
    title = models.CharField(max_length=75, default='', blank=False, null=False)
    body = CharField(max_length=2000, default='', null=True, blank=True)
    slug = models.SlugField(unique=True, blank=True)
    publish = models.DateTimeField('publish', default=timezone.now)
    
    class Meta:
        ordering = ('-publish',)
        verbose_name = 'category'
        verbose_name_plural = 'categories'
        get_latest_by = 'publish'

class Article(models.Model):
    id = models.AutoField(primary_key=True)
    author = models.ForeignKey(User, blank=True, null=True, on_delete=models.SET_NULL) #settings INSTALLED_APPS
    title = models.CharField('title', max_length=200)
    body = CKEditor5Field('Body', config_name='extends')
    last_updated = models.DateTimeField(auto_now=True)
    publish = models.DateTimeField('publish', default=timezone.now)
    #tags = TagField(required=False, widget=LabelWidget)
    category = models.ForeignKey(Category, on_delete = models.CASCADE, blank=True, related_name='category')
    slug = models.SlugField(unique=True, blank=True)

views.py

@login_required
def hal_home(request):
    top_categories = Category.objects.all()[:3]
    category_related_articles = Article.objects.prefetch_related('category').all()
    context = {
            'category_related_articles': category_related_articles
            }
    return render(request, 'hal/homepage.html', context)

homepage.html

{% for category in top_categories %}
<div class="btn btn-light text-center text-justify">
  <div>{{ category.title }}</div>
</div>
<br>
<p>{% for article in category_related_articles  %}
  {{article.title}}<br>
  {% endfor %}</p>
{% empty %}
<div>No categories</div>
{% endfor %}

Answer 1

You should use prefetch_related with your category queryset.

And also I would suggest you to change the related_name to articles since category.articles.all() seems more readable and easier than category.category.all() .

category = models.ForeignKey(Category, on_delete = models.CASCADE, blank=True, related_name='articles')

Now you can change some code in your views and templates.

top_categories = Category.objects.prefetch_related("articles").all()[:3]
context = {'top_categories': top_categories}

Now you can get articles by category in template with:

{% for category in top_categories %}
{{category.title}}

# articles of each category 
{% for article in category.articles.all %}
    {{article}}
{% endfor %}

{% endfor %}