fixing env vars issue

src/lib/Login.svelte

@@ -0,0 +1,7 @@
+<script>
+  async function login() {
+    alert("login");
+  }
+</script>
+
+<button on:click={login}>Login</button>

src/routes/+page.svelte

@@ -1,5 +1,21 @@
-<script>
-  import GraphQL from "./GraphQL.svelte";
+<script lang="ts">
+  import { createQuery } from "../lib/wundergraph";
+  import Login from "$lib/Login.svelte";
+
+  const projectsQuery = createQuery({
+    operationName: "Projects",
+  });
 </script>
 
-<GraphQL />
+<Login />
+<br />
+Projects
+<div class="results">
+  {#if $projectsQuery.isLoading}
+    <p>Loading...</p>
+  {:else if $projectsQuery.error}
+    <pre>Error: {JSON.stringify($projectsQuery.error, null, 2)}</pre>
+  {:else}
+    <pre>{JSON.stringify($projectsQuery.data, null, 2)}</pre>
+  {/if}
+</div>

src/routes/GraphQL.svelte

@@ -1,46 +0,0 @@
-<script lang="ts">
-  import { createQuery } from "../lib/wundergraph";
-
-  //   const dragonsQuery = createQuery({
-  //     operationName: "Dragons",
-  //   });
-  const projectsQuery = createQuery({
-    operationName: "Projects",
-  });
-  const todosQuery = createQuery({
-    operationName: "Todos",
-  });
-</script>
-
-<!-- Dragons
-<div class="results">
-  {#if $dragonsQuery.isLoading}
-    <p>Loading...</p>
-  {:else if $dragonsQuery.error}
-    <pre>Error: {JSON.stringify($dragonsQuery.error, null, 2)}</pre>
-  {:else}
-    <pre>{JSON.stringify($dragonsQuery.data, null, 2)}</pre>
-  {/if}
-</div> -->
-
-Projects
-<div class="results">
-  {#if $projectsQuery.isLoading}
-    <p>Loading...</p>
-  {:else if $projectsQuery.error}
-    <pre>Error: {JSON.stringify($projectsQuery.error, null, 2)}</pre>
-  {:else}
-    <pre>{JSON.stringify($projectsQuery.data, null, 2)}</pre>
-  {/if}
-</div>
-
-Todos
-<div class="results">
-  {#if $todosQuery.isLoading}
-    <p>Loading...</p>
-  {:else if $todosQuery.error}
-    <pre>Error: {JSON.stringify($todosQuery.error, null, 2)}</pre>
-  {:else}
-    <pre>{JSON.stringify($todosQuery.data, null, 2)}</pre>
-  {/if}
-</div>