Filter empty continents directly in GraphQL query

2022-07-18 17:26:06 +02:00
parent 4f274e52ce
commit 5d7d4896fe
3 changed files with 6 additions and 11 deletions
--- a/src/app.html
+++ b/src/app.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="utf-8">
+    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="theme-color" content="#3C0576">
    <meta name="mobile-web-app-capable" content="yes">
@@ -10,11 +10,11 @@

    <link rel="icon" type="image/png" sizes="64x64" href="/images/favicon.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/images/siteicon.png">
-	%sveltekit.head%
+    %sveltekit.head%
 </head>

 <body>
-	%sveltekit.body%
+    %sveltekit.body%

    <script>
        document.body.style.opacity = '0'
--- a/src/components/organisms/InteractiveGlobe2.svelte
+++ b/src/components/organisms/InteractiveGlobe2.svelte
@@ -23,7 +23,7 @@
    $: globeResolution = innerWidth > 1440 && window.devicePixelRatio > 1 ? '4k' : '2k'

    const { continents, locations } = getContext('global')
-    const randomContinent: any = getRandomItem(continents.filter((cont: any) => cont.countries))
+    const randomContinent: any = getRandomItem(continents)
    const markers = locations.map(({ name, slug, country, coordinates: { coordinates }}): Marker => ({
        name,
        slug,
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -114,11 +114,10 @@
                    locations { id slug }
                }

-                continents: continent {
+                continents: continent (filter: { countries: { slug: { _neq: "_empty" }}}) {
                    name
                    slug
                    rotation
-                    countries { id slug }
                }

                settings {
@@ -163,14 +162,10 @@

        if (res) {
            const { data } = res
-            const filteredContinents = data.continents.filter((cont: any) => cont.countries.length)

            return {
                props: {
-                    data: {
-                        ...data,
-                        continents: filteredContinents,
-                    },
+                    data,
                    count: {
                        photos: data.countPhotos[0].count.id,
                        locations: data.countLocations[0].count.id,