🚧 Migrate env variables to use internal SvelteKit system

Some API fetching function rewriting needed as privates cannot be included into public code

src/routes/[country]/[location]/+page.server.ts

@@ -1,5 +1,6 @@
 import { error } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
+import { PUBLIC_LIST_AMOUNT } from '$env/static/public'
 import { fetchAPI } from '$utils/api'
 
 export const photoFields = `
@@ -56,7 +57,7 @@ export const load: PageServerLoad = async ({ params }) => {
                         location: { slug: { _eq: "${slug}" }}
                     },
                     sort: "-date_created",
-                    limit: ${import.meta.env.VITE_LIST_AMOUNT},
+                    limit: ${PUBLIC_LIST_AMOUNT},
                     page: 1,
                 ) {
                     ${photoFields}

src/routes/[country]/[location]/+page.svelte

@@ -10,9 +10,10 @@
     import dayjs from 'dayjs'
     import relativeTime from 'dayjs/plugin/relativeTime'
     import { quartOut } from '$animations/easings'
-    import { fetchAPI, getAssetUrlKey } from '$utils/api'
+    import { getAssetUrlKey } from '$utils/api'
     import { DELAY } from '$utils/contants'
     import { photoFields } from './+page.server'
+    import { PUBLIC_LIST_INCREMENT } from '$env/static/public'
     // Components
     import Metas from '$components/Metas.svelte'
     import PageTransition from '$components/PageTransition.svelte'
@@ -61,7 +62,7 @@
             photos = [...photos, ...newPhotos]
 
             // Define actions if the number of new photos is the expected ones
-            if (newPhotos.length === Number(import.meta.env.VITE_LIST_INCREMENT)) {
+            if (newPhotos.length === Number(PUBLIC_LIST_INCREMENT)) {
                 // Increment the current page
                 currentPage++
             }
@@ -71,24 +72,27 @@
         }
     }
 
-    // [function] Load photos helper
+    // Load photos helper
     const loadPhotos = async (page?: number) => {
-        const res = fetchAPI(`
-            query {
-                photos: photo (
-                    filter: {
-                        location: { slug: { _eq: "${params.location}" }},
-                        status: { _eq: "published" },
-                    },
-                    sort: "-date_created",
-                    limit: ${import.meta.env.VITE_LIST_INCREMENT},
-                    page: ${page},
-                ) {
-                    ${photoFields}
+        const res = await fetch('/api/data', {
+            method: 'POST',
+            body: `
+                query {
+                    photos: photo (
+                        filter: {
+                            location: { slug: { _eq: "${params.location}" }},
+                            status: { _eq: "published" },
+                        },
+                        sort: "-date_created",
+                        limit: ${PUBLIC_LIST_INCREMENT},
+                        page: ${page},
+                    ) {
+                        ${photoFields}
+                    }
                 }
-            }
-        `)
-        const { data: { photos }} = await res
+            `,
+        })
+        const { data: { photos }} = await res.json()
 
         if (photos) {
             // Return new photos

src/routes/[country]/[location]/[photo]/+page.svelte

@@ -12,7 +12,7 @@
     import { quartOut } from 'svelte/easing'
     import dayjs from 'dayjs'
     import { stagger, timeline } from 'motion'
-    import { fetchAPI, getAssetUrlKey } from '$utils/api'
+    import { getAssetUrlKey } from '$utils/api'
     import { previousPage } from '$utils/stores'
     import { DELAY } from '$utils/contants'
     import { throttle } from '$utils/functions'
@@ -151,30 +151,33 @@
 
         // Load new prev or next photos
         const isPrev = direction === directions.PREV
-        const res = await fetchAPI(`
-            query {
-                photos: photo (
-                    filter: {
-                        location: { slug: { _eq: "${location.slug}" }},
-                        id: { _${isPrev ? 'gt' : 'lt'}: ${id} },
-                        status: { _eq: "published" },
-                    },
-                    sort: "${isPrev ? '' : '-'}id",
-                    limit: ${limit},
-                ) {
-                    id
-                    title
-                    slug
-                    date_taken
-                    image {
+        const res = await fetch('/api/data', {
+            method: 'POST',
+            body: `
+                query {
+                    photos: photo (
+                        filter: {
+                            location: { slug: { _eq: "${location.slug}" }},
+                            id: { _${isPrev ? 'gt' : 'lt'}: ${id} },
+                            status: { _eq: "published" },
+                        },
+                        sort: "${isPrev ? '' : '-'}id",
+                        limit: ${limit},
+                    ) {
                         id
                         title
+                        slug
+                        date_taken
+                        image {
+                            id
+                            title
+                        }
+                        city
                     }
-                    city
                 }
-            }
-        `)
-        const { data: { photos: newPhotos }} = res
+            `,
+        })
+        const { data: { photos: newPhotos }} = await res.json()
 
         // Not loading anymore
         isLoading = false