Set up openapi-ts

Author: pamella

.eslintignore

@@ -1,2 +1,3 @@
 frontend/bundles/
 frontend/webpack_bundles/
+frontend/js/api/

.eslintrc.js

@@ -46,4 +46,15 @@ module.exports = {
       version: "detect",
     },
   },
+  overrides: [
+    {
+      files: ["openapi-ts.config.ts"],
+      rules: {
+        "import/no-extraneous-dependencies": [
+          "error",
+          { devDependencies: true },
+        ],
+      },
+    },
+  ],
 };

.pre-commit-config.yaml

@@ -64,3 +64,9 @@ repos:
         language: system
         files: ^backend/
         pass_filenames: false
+      - id: frontend-api
+        name: frontend-api-local
+        entry: npm run openapi-ts
+        language: system
+        files: backend/schema\.yml$
+        pass_filenames: false

Makefile

@@ -20,6 +20,7 @@ docker_setup:
 	docker compose build --no-cache backend
 	docker compose run --rm backend python manage.py spectacular --color --file schema.yml
 	docker compose run frontend npm install
+	docker compose run --rm frontend npm run openapi-ts
 
 docker_test:
 	docker compose run backend python manage.py test $(ARG) --parallel --keepdb
@@ -51,3 +52,6 @@ docker_backend_shell:
 
 docker_backend_update_schema:
 	docker compose run --rm backend python manage.py spectacular --color --file schema.yml
+
+docker_frontend_update_api:
+	docker compose run --rm frontend npm run openapi-ts

backend/common/serializers.py

@@ -0,0 +1,5 @@
+from rest_framework import serializers
+
+
+class MessageSerializer(serializers.Serializer):
+    message = serializers.CharField()

backend/common/views.py

@@ -1,35 +1,34 @@
 from django.views import generic
 
-from drf_spectacular.utils import OpenApiExample, OpenApiResponse, extend_schema
+from drf_spectacular.utils import OpenApiExample, extend_schema
 from rest_framework import status, viewsets
 from rest_framework.decorators import action
 from rest_framework.permissions import AllowAny
 from rest_framework.response import Response
 
+from .serializers import MessageSerializer
+
 
 class IndexView(generic.TemplateView):
     template_name = "common/index.html"
 
 
 class RestViewSet(viewsets.ViewSet):
+    serializer_class = MessageSerializer
+
     @extend_schema(
         summary="Check REST API",
         description="This endpoint checks if the REST API is working.",
-        responses={
-            200: OpenApiResponse(
-                description="Successful Response",
-                examples=[
-                    OpenApiExample(
-                        "Example Response",
-                        value={
-                            "result": "This message comes from the backend. "
-                            "If you're seeing this, the REST API is working!"
-                        },
-                        response_only=True,
-                    )
-                ],
+        examples=[
+            OpenApiExample(
+                "Successful Response",
+                value={
+                    "message": "This message comes from the backend. "
+                    "If you're seeing this, the REST API is working!"
+                },
+                response_only=True,
             )
-        },
+        ],
         methods=["GET"],
     )
     @action(
@@ -39,10 +38,11 @@ class RestViewSet(viewsets.ViewSet):
         url_path="rest-check",
     )
     def rest_check(self, request):
-        return Response(
-            {
-                "result": "This message comes from the backend. "
+        serializer = self.serializer_class(
+            data={
+                "message": "This message comes from the backend. "
                 "If you're seeing this, the REST API is working!"
-            },
-            status=status.HTTP_200_OK,
+            }
         )
+        serializer.is_valid(raise_exception=True)
+        return Response(serializer.data, status=status.HTTP_200_OK)

frontend/js/pages/Home.tsx

@@ -1,20 +1,20 @@
 import { useState, useEffect } from "react";
 import Button from "react-bootstrap/Button";
-import { useDispatch, useSelector } from "react-redux";
 
 import DjangoImgSrc from "../../assets/images/django-logo-negative.png";
-import { AppDispatch, RootState } from "../store";
-import { fetchRestCheck } from "../store/rest_check";
+import { RestService } from "../api";
 
 const Home = () => {
-  const dispatch: AppDispatch = useDispatch();
-  const restCheck = useSelector((state: RootState) => state.restCheck);
-  useEffect(() => {
-    const action = fetchRestCheck();
-    dispatch(action);
-  }, [dispatch]);
-
   const [showBugComponent, setShowBugComponent] = useState(false);
+  const [restCheck, setRestCheck] =
+    useState<Awaited<ReturnType<typeof RestService.restRestCheckRetrieve>>>();
+
+  useEffect(() => {
+    async function onFetchRestCheck() {
+      setRestCheck(await RestService.restRestCheckRetrieve());
+    }
+    onFetchRestCheck();
+  }, []);
 
   return (
     <>
@@ -31,7 +31,7 @@ const Home = () => {
         <img alt="Django Negative Logo" src={DjangoImgSrc} />
       </div>
       <h2>Rest API</h2>
-      <p>{restCheck?.data?.payload?.result}</p>
+      <p>{restCheck?.message}</p>
       <Button variant="outline-dark" onClick={() => setShowBugComponent(true)}>
         Click to test if Sentry is capturing frontend errors! (Should only work
         in Production)

frontend/js/pages/__tests__/Home.spec.tsx

@@ -1,23 +1,18 @@
 import { render, screen, waitFor } from "@testing-library/react";
-import { useDispatch, useSelector } from "react-redux";
 
-import { fetchRestCheck } from "../../store/rest_check";
+import { RestService } from "../../api";
 import Home from "../Home";
 
-jest.mock("react-redux", () => ({
-  useDispatch: jest.fn(),
-  useSelector: jest.fn(),
-}));
-
-jest.mock("../../store/rest_check", () => ({
-  fetchRestCheck: jest.fn(),
+jest.mock("../../api", () => ({
+  RestService: {
+    restRestCheckRetrieve: jest.fn(),
+  },
 }));
 
 describe("Home", () => {
   beforeEach(() => {
-    (useDispatch as unknown as jest.Mock).mockReturnValue(jest.fn());
-    (useSelector as unknown as jest.Mock).mockReturnValue({
-      data: { payload: { result: "Test Result" } },
+    (RestService.restRestCheckRetrieve as jest.Mock).mockResolvedValue({
+      message: "Test Result",
     });
   });
 
@@ -33,11 +28,11 @@ describe("Home", () => {
     expect(await screen.findByText("Test Result")).toBeInTheDocument();
   });
 
-  test("dispatches fetchRestCheck action on mount", async () => {
+  test("calls restRestCheckRetrieve on mount", async () => {
     render(<Home />);
 
     await waitFor(() => {
-      expect(fetchRestCheck).toHaveBeenCalledWith();
+      expect(RestService.restRestCheckRetrieve).toHaveBeenCalled();
     });
   });
 });

openapi-ts.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "@hey-api/openapi-ts";
+
+export default defineConfig({
+  input: "backend/schema.yml",
+  output: {
+    path: "frontend/js/api",
+    format: "prettier",
+  },
+  client: "axios",
+  useOptions: true,
+});

package.json

@@ -16,9 +16,11 @@
     "build": "NODE_ENV=production tsc && webpack --progress --bail --mode=production",
     "lint": "eslint frontend --fix",
     "tsc": "tsc -p ./tsconfig.json --noEmit",
-    "coverage": "jest --coverage"
+    "coverage": "jest --coverage",
+    "openapi-ts": "openapi-ts"
   },
   "dependencies": {
+    "@hey-api/openapi-ts": "^0.44.0",
     "@reduxjs/toolkit": "~2.2.4",
     "@sentry/browser": "~8.0.0",
     "@sentry/react": "~8.0.0",