🏗️ Migrate docker containers query to tRPC

src/modules/Docker/DockerModule.tsx

@@ -1,14 +1,13 @@
 import { ActionIcon, Drawer, Tooltip } from '@mantine/core';
 import { useHotkeys } from '@mantine/hooks';
 import { IconBrandDocker } from '@tabler/icons-react';
-import axios from 'axios';
 import Docker from 'dockerode';
 import { useTranslation } from 'next-i18next';
-import { useEffect, useState } from 'react';
-import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
 import { useCardStyles } from '../../components/layout/useCardStyles';
 import { useConfigContext } from '../../config/provider';
 
+import { api } from '~/utils/api';
 import ContainerActionBar from './ContainerActionBar';
 import DockerTable from './DockerTable';
 
@@ -20,22 +19,13 @@ export default function DockerMenuButton(props: any) {
 
   const dockerEnabled = config?.settings.customization.layout.enabledDocker || false;
 
-  const { data, isLoading, refetch } = useQuery({
-    queryKey: ['containers'],
-    queryFn: async () => {
-      const containers = await axios.get('/api/docker/containers');
-      return containers.data;
-    },
+  const { data, refetch } = api.docker.containers.useQuery(undefined, {
     enabled: dockerEnabled,
   });
   useHotkeys([['mod+B', () => setOpened(!opened)]]);
 
   const { t } = useTranslation('modules/docker');
 
-  useEffect(() => {
-    refetch();
-  }, [config?.settings]);
-
   const reload = () => {
     refetch();
     setSelection([]);
@@ -64,7 +54,7 @@ export default function DockerMenuButton(props: any) {
           },
         }}
       >
-        <DockerTable containers={data} selection={selection} setSelection={setSelection} />
+        <DockerTable containers={data ?? []} selection={selection} setSelection={setSelection} />
       </Drawer>
       <Tooltip label={t('actionIcon.tooltip')}>
         <ActionIcon

src/server/api/root.ts

@@ -2,6 +2,7 @@ import { createTRPCRouter } from '~/server/api/trpc';
 import { appRouter } from './routers/app';
 import { rssRouter } from './routers/rss';
 import { configRouter } from './routers/config';
+import { dockerRouter } from './routers/docker/router';
 
 /**
  * This is the primary router for your server.
@@ -12,6 +13,7 @@ export const rootRouter = createTRPCRouter({
   app: appRouter,
   rss: rssRouter,
   config: configRouter,
+  docker: dockerRouter,
 });
 
 // export type definition of API

src/server/api/routers/docker/DockerSingleton.ts

@@ -0,0 +1,21 @@
+import Docker from 'dockerode';
+
+export default class DockerSingleton extends Docker {
+  private static dockerInstance: DockerSingleton;
+
+  private constructor() {
+    super();
+  }
+
+  public static getInstance(): DockerSingleton {
+    if (!DockerSingleton.dockerInstance) {
+      DockerSingleton.dockerInstance = new Docker({
+        // If env variable DOCKER_HOST is not set, it will use the default socket
+        ...(process.env.DOCKER_HOST && { host: process.env.DOCKER_HOST }),
+        // Same thing for docker port
+        ...(process.env.DOCKER_PORT && { port: process.env.DOCKER_PORT }),
+      });
+    }
+    return DockerSingleton.dockerInstance;
+  }
+}

src/server/api/routers/docker/router.ts

@@ -0,0 +1,18 @@
+import { TRPCError } from '@trpc/server';
+import { createTRPCRouter, publicProcedure } from '../../trpc';
+import DockerSingleton from './DockerSingleton';
+
+export const dockerRouter = createTRPCRouter({
+  containers: publicProcedure.query(async () => {
+    try {
+      const docker = DockerSingleton.getInstance();
+      const containers = await docker.listContainers({ all: true });
+      return containers;
+    } catch (err) {
+      throw new TRPCError({
+        code: 'INTERNAL_SERVER_ERROR',
+        message: 'Unable to get containers',
+      });
+    }
+  }),
+});