src/app/_components/AllCountries.tsx

@@ -1,9 +1,9 @@
 import { Delete } from "lucide-react";
 import { deleteCountry } from "~/server/actions/deleteCountry";
-import { db } from "~/server/db";
+import getAllCountries from "~/server/actions/getAllCountries";
 
 export default async function AllCountries() {
-  const countries = await db.query.countries.findMany();
+  const countries = await getAllCountries();
   return (
     <div className="pt-4">
       <h1 className="text-2xl">All Countries:</h1>

src/app/_components/AllRegions.tsx

@@ -1,8 +1,9 @@
-import { db } from "~/server/db";
+import getAllCountries from "~/server/actions/getAllCountries";
+import getAllRegions from "~/server/actions/getAllRegions";
 
 export default async function AllRegions() {
-  const allRegions = await db.query.regions.findMany();
-  const allCountries = await db.query.countries.findMany();
+  const allRegions = await getAllRegions();
+  const allCountries = await getAllCountries();
   return (
     <div className="pt-4">
       <h1 className="text-2xl">All Regions:</h1>

src/server/actions/getAllCountries.ts

@@ -0,0 +1,6 @@
+import { db } from "../db";
+
+export default async function getAllCountries() {
+  const allCountries = await db.query.countries.findMany();
+  return allCountries;
+}

src/server/actions/getAllRegions.ts

@@ -0,0 +1,6 @@
+import { db } from "../db";
+
+export default async function getAllRegions() {
+  const allRegions = await db.query.regions.findMany();
+  return allRegions;
+}