handle random recipe page

composables/useRecipeRandom.ts

@@ -0,0 +1,4 @@
+export default function useRecipeRandom() {
+  const { $client } = useNuxtApp();
+  return $client.recipeRandom.useQuery();
+}

pages/[id].vue

@@ -15,10 +15,13 @@ useHead({
 const { params } = useRoute();
 const routeParam = params.id;
 
-const id =
+const id = typeof routeParam === "string" ? routeParam : routeParam[0];
-  typeof routeParam === "string" ? Number(routeParam) : Number(routeParam[0]);
 
-const { data: recipe, status, error } = await useRecipeById(id);
+const {
+  data: recipe,
+  status,
+  error,
+} = id === "random" ? await useRecipeRandom() : await useRecipeById(Number(id));
 
 if (error.value) {
   let statusCode = 400;

pages/random.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-const {
-  data: recipe,
-  pending,
-  error,
-} = await useFetch("/api/recipes", { lazy: true });
-</script>
-
-<template>
-  <div v-if="pending">Loading</div>
-  <div v-else-if="error">Failed: {{ error }}</div>
-  <section v-else>
-    <Recipe :recipe="recipe" />
-  </section>
-</template>

server/api/recipes.get.ts

@@ -1,13 +0,0 @@
-import { parseRecipeData } from "~/utils/recipes";
-import type { Meal } from "~/types/recipe";
-
-export default defineEventHandler(async (_event) => {
-  const { apiUrl } = useRuntimeConfig();
-
-  const data = await $fetch<{ meals: Meal[] }>(
-    new URL("random.php", apiUrl).toString(),
-  );
-
-  const recipes = parseRecipeData(data);
-  return recipes[0];
-});

server/trpc/routers/recipes.ts

@@ -29,4 +29,17 @@ export const recipeRouter = router({
       const recipes = parseRecipeData(data);
       return recipes[0];
     }),
+  recipeRandom: publicProcedure.query(async () => {
+    const data = await $fetch<{ meals: Meal[] }>(
+      new URL("random.php", apiUrl).toString(),
+    );
+    if (!data?.meals) {
+      throw createError({
+        statusCode: 500,
+      });
+    }
+
+    const recipes = parseRecipeData(data);
+    return recipes[0];
+  }),
 });