andrew part3

frontend/src/common/redux/backendApi.ts

@@ -50,5 +50,13 @@ export const backendApi = createApi({
       }
     },
   }),
-  endpoints: () => ({}),
+  endpoints: (builder) => ({
+    getBeginnerMessage: builder.query<{ result: string }, void>({
+      query: () => {
+        return {
+          url: "/api/training/beginner_endpoint",
+        };
+      },
+    }),
+  }),
 });

frontend/src/pages/beginner.tsx

@@ -0,0 +1,17 @@
+import { backendApi } from "@/common/redux/backendApi";
+import { Button } from "@mui/material";
+import React from "react";
+
+const Beginner = () => {
+  const [trigger, result] = backendApi.useLazyGetBeginnerMessageQuery();
+
+  return (
+    <>
+      <div>Beginner page</div>
+      <Button onClick={() => trigger()}>Click on me</Button>
+      {result.data && <div>The backend returned: {result.data.result}</div>}
+    </>
+  );
+};
+
+export default Beginner;

training/training/urls.py

@@ -29,6 +29,10 @@
 def test(request: HttpRequest):
     return 200, {"result": "200 Backend surface test successful"}
 
+@api.get("/beginner_endpoint")
+def beginner_endpoint(request: HttpRequest):
+    return 200, {"result": "This is a response from the backend"}
+
 
 api.add_router("/datasets/default/", get_default_datasets_router())
 api.add_router("/tabular", get_tabular_router())