Query Location page content

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

@@ -1 +0,0 @@
-<h1>Hello location</h1>

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

@@ -0,0 +1 @@
+photo page

src/routes/[country]/[location]/index.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { page } from '$app/stores'
+    // Components
+    import Image from '$components/atoms/Image.svelte'
+
+    export let data: any
+    export let photos: any
+
+    const { params } = $page
+</script>
+
+<h1>Hello {data.name}</h1>
+
+{#each photos as { image: { id, title }, slug }}
+    <div class="photo">
+        <a href="/{params.country}/{params.location}/{slug}">
+            <Image
+                id={id}
+                alt="{title}, {data.name}"
+                width={1000}
+                height={600}
+                format="webp"
+            />
+        </a>
+    </div>
+{/each}
+
+
+<script context="module" lang="ts">
+    import { fetchAPI } from '$utils/api'
+
+    export async function load ({ page, session, fetch, context }) {
+        const { location } = page.params
+
+        const res = await fetchAPI(`
+            query {
+                location (filter: { slug: { _eq: "${location}" } }) {
+                    name
+                    slug
+                    description
+                    date_updated
+                }
+
+                photo (filter: { location: { slug: { _eq: "${location}" } }}) {
+                    title
+                    slug
+                    date_taken
+                    image {
+                        id
+                        title
+                    }
+                }
+            }
+        `)
+
+        const { data } = res
+
+        return {
+            props: {
+                data: data.location[0],
+                photos: data.photo,
+            }
+        }
+    }
+</script>