Add tooling/docs for auto-generating API hooks.

client/README.md

@@ -16,6 +16,22 @@ Then, run `npm start` to start the development server. Launch the Qt UI with
 `--new-map --dev` to connect the webview to the development server, or navigate
 to http://localhost:3000 in your browser.
 
+## Regenerating the API stubs
+
+The backend uses FastAPI which exposes `/openapi.json`. This is consumed by
+`@rtk-query/codegen-openapi` to automatically generate the API stubs in
+`src/api/liberationApi.ts`.
+
+If you make a change to the API surface the typescript API will need to be
+regenerated. To do this, first launch Liberation (to start the backend) and run
+
+```powershell
+npm run regenerate-api
+```
+
+See https://redux-toolkit.js.org/rtk-query/usage/code-generation for more
+information.
+
 ## Available Scripts
 
 In the project directory, you can run:

client/openapi-config.ts

@@ -0,0 +1,12 @@
+import { ConfigFile } from "@rtk-query/codegen-openapi";
+
+const config: ConfigFile = {
+  schemaFile: "http://[::1]:5000/openapi.json",
+  apiFile: "./src/api/baseApi.ts",
+  apiImport: "baseApi",
+  outputFile: "./src/api/liberationApi.ts",
+  exportName: "liberationApi",
+  hooks: true,
+};
+
+export default config;

client/package.json

@@ -31,6 +31,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build && generate-license-file --input package.json --output build/NOTICE",
+    "regenerate-api": "rtk-query-codegen-openapi ./openapi-config.ts",
     "prepare": "eslint src && license-checker --onlyAllow \"MIT;Apache-2.0;CC0-1.0;BSD-3-Clause;ISC;Custom: https://github.com/tmcw/jsonlint;BSD-2-Clause;Hippocratic-2.1;BSD*;WTFPL\" --excludePrivatePackages --production",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
@@ -55,6 +56,7 @@
     ]
   },
   "devDependencies": {
+    "@rtk-query/codegen-openapi": "^1.0.0-alpha.1",
     "@trivago/prettier-plugin-sort-imports": "^3.2.0",
     "@types/leaflet": "^1.7.9",
     "@types/redux-logger": "^3.0.9",
@@ -64,6 +66,7 @@
     "generate-license-file": "^1.3.0",
     "license-checker": "^25.0.1",
     "react-scripts": "5.0.0",
+    "ts-node": "^10.7.0",
     "wait-on": "^6.0.1"
   }
 }

client/src/api/baseApi.ts

@@ -0,0 +1,7 @@
+import { HTTP_URL } from "./backend";
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+
+export const baseApi = createApi({
+  baseQuery: fetchBaseQuery({ baseUrl: HTTP_URL }),
+  endpoints: () => ({}),
+});