Django messages as AJAX endpoint

README.md

Django messages as AJAX endpoint

Simple endpoint to expose Django messages as JSON (Django 4.2)

Reading messages removes them from tracker, so make sure you're properly exposing them always

Also including the React side of the impementation (React 18.2), though this may vary for you

This is part of a larger exploration in:

https://github.com/twolfson/if-i-were-to-build-a-startup-web-app/tree/main/explorations/4-django-allauth-react-proxy

Last updated: Oct 2023

urls.py

from django.urls import path

from . import views

urlpatterns = [
    path("messages/", views.messages),
]

views.py

from django.http import JsonResponse
from django.views.decorators.http import require_http_methods
from django.contrib.messages import get_messages


@require_http_methods(["GET"])
def messages(request):
    # https://github.com/jgerigmeyer/jquery-django-messages-ui/blob/2.0.2/messages_ui/middleware.py#L45-L55
    # https://docs.djangoproject.com/en/4.2/ref/contrib/messages/#displaying-messages
    message_list = [
        {
            "message": message.message,
            "level_tag": message.level_tag,
            "extra_tags": message.extra_tags,
        }
        for message in get_messages(request)
    ]

    return JsonResponse({"messages": message_list})

z_NotificationContainer.jsx

import { ToastContainer, toast } from "react-toastify";
import { useEffect } from "react";
import { useQuery } from "react-query";

export const useMessages = (options) => {
  return useQuery(
    ["messages"],
    () =>
      // Doesn't handle error responses (e.g. 404 or 500 (non-JSON)) well
      fetch("/messages/").then((res) => res.json()),
    options
  );
};

export const NotificationContainer = () => {
  const { error: messagesError, data: messagesData } = useMessages();

  useEffect(() => {
    if (messagesError) {
      throw messagesError;
    }
    if (messagesData) {
      messagesData.messages.forEach((message) => {
        toast(message.message, { type: message.level_tag });
      });
    }
  }, [messagesError, messagesData]);

  return <ToastContainer />;
};