Enable gql batch queying

CHANGELOG.rst

@@ -16,6 +16,7 @@ Added
 * Provide API endpoint for system status.
 * [Dev] UpdateIndicator Vue Component to display the status of interactive pages
 * [Dev] DeleteDialog Vue Component to unify item deletion in the new frontend
+* Use build-in mechanism in Apollo for GraphQL batch querying.
 
 
 Changed

aleksis/core/frontend/app/apollo.js

@@ -2,11 +2,12 @@
  * Configuration for Apollo provider, client, and caches.
  */
 
-import { ApolloClient, HttpLink, from } from "@/apollo-boost";
+import { ApolloClient, from } from "@/apollo-boost";
 
 import { RetryLink } from "@/apollo-link-retry";
 import { persistCache, LocalStorageWrapper } from "@/apollo3-cache-persist";
 import { InMemoryCache } from "@/apollo-cache-inmemory";
+import { BatchHttpLink } from "@/apollo-link-batch-http";
 
 // Cache for GraphQL query results in memory and persistent across sessions
 const cache = new InMemoryCache();
@@ -33,14 +34,17 @@ const links = [
   // Automatically retry failed queries
   new RetryLink(),
   // Finally, the HTTP link to the real backend (Django)
-  new HttpLink({
+  new BatchHttpLink({
     uri: getGraphqlURL(),
+    batchInterval: 200,
+    batchDebounce: true,
   }),
 ];
 
 /** Upstream Apollo GraphQL client */
 const apolloClient = new ApolloClient({
   cache,
+  shouldBatch: true,
   link: from(links),
 });
 

aleksis/core/settings.py

@@ -588,6 +588,7 @@ YARN_INSTALLED_APPS = [
     "@iconify/json@^2.1.30",
     "@mdi/font@^6.9.96",
     "apollo-boost@^0.4.9",
+    "apollo-link-batch-http@^1.2.14",
     "apollo-link-retry@^2.2.16",
     "apollo3-cache-persist@^0.14.1",
     "deepmerge@^4.2.2",

aleksis/core/urls.py

@@ -27,7 +27,7 @@ urlpatterns = [
     path("__icons__/", include("dj_iconify.urls")),
     path(
         "graphql/",
-        csrf_exempt(views.LoggingGraphQLView.as_view(graphiql=True)),
+        csrf_exempt(views.LoggingGraphQLView.as_view(batch=True)),
         name="graphql",
     ),
     path("logo", force_maintenance_mode_off(views.LogoView.as_view()), name="logo"),