feat: proxy and cache backend responses

layer0.config.js

@@ -1,5 +1,11 @@
 // This file was automatically added by layer0 deploy.
 // You should commit this file to source control.
 module.exports = {
-  connector: '@layer0/next',
-}
+  connector: "@layer0/next",
+  backends: {
+    origin: {
+      domainOrIp: "hello-free-shavacado-backend-production.up.railway.app",
+      hostHeader: "hello-free-shavacado-backend-production.up.railway.app",
+    },
+  },
+};

routes.ts

@@ -4,6 +4,29 @@ import { Router } from "@layer0/core/router";
 import { nextRoutes } from "@layer0/next";
 
 export default new Router()
+  .get("/_next/image", ({ cache }) => {
+    cache({
+      edge: {
+        maxAgeSeconds: 60 * 60 * 24, // One Day
+      },
+    });
+  })
+  .get("/", ({ cache }) => {
+    cache({
+      edge: {
+        maxAgeSeconds: 60 * 60,
+      },
+    });
+  })
+  .get("/hellofresh", ({ cache, proxy }) => {
+    cache({
+      edge: {
+        maxAgeSeconds: 60 * 60,
+        staleWhileRevalidateSeconds: 60 * 60 * 24,
+      },
+    });
+    proxy("origin");
+  })
   .match("/service-worker.js", ({ serviceWorker }) => {
     return serviceWorker(".next/static/service-worker.js");
   })

src/components/RecipeLInk.tsx

@@ -30,7 +30,7 @@ export const RecipeLink = ({ favoritedRecipe }: { favoritedRecipe: FavoritedReci
           </ActionIcon>
         }
       >
-        <NextLink href={recipe?.items[0]?.websiteUrl} key={favoritedRecipe.id} target="_blank">
+        <NextLink href={recipe?.items[0]?.websiteUrl} key={favoritedRecipe?.id} target="_blank">
           {recipe?.items[0].name}
         </NextLink>
       </List.Item>

src/hooks/useHellofreshBySlug.tsx

@@ -7,6 +7,6 @@ export const useHellofreshBySlug = (slug: string, token: string) => {
     async () => {
       return await hellofreshSearchBySlug({ token, slug });
     },
-    { staleTime: 60000 },
+    { staleTime: 60, notifyOnChangeProps: ["data", "error"] },
   );
 };

src/hooks/useRecipesQuery.tsx

@@ -7,18 +7,10 @@ export const useRecipesQuery = ({ token, debouncedSearchText, page }) => {
     ["recipes", token, debouncedSearchText, page],
     async (): Promise<RecipeQuery> => {
       return await hellofreshSearch(debouncedSearchText, token, { page });
-      // const response = await ky
-      //   // .get(
-      //   //   `/api/hellofresh?token=${token}&searchText=${debouncedSearchText}&page=${page}`,
-      //   // )
-      //   .get(`${HELLOFRESH_SEARCH_URL}/hellofresh?q=${debouncedSearchText}&page=${page}`)
-      //   .json<RecipeQuery>();
-
-      // return response;
     },
     {
       enabled: !!token && !!debouncedSearchText,
-      staleTime: 1000 * 60 * 60,
+      staleTime: 60,
       retry: false,
     },
   );

src/util/hellofresh.ts

@@ -34,7 +34,7 @@ export const hellofreshSearch = async (
 
   // console.log(ingredients);
 
-  const response = await ky.get(`${HELLOFRESH_SEARCH_URL}?page=${page}&q=${searchText}`, {
+  const response = await ky.get(`/hellofresh?page=${page}&q=${searchText}`, {
     headers: { authorization: `Bearer ${token}` },
   });