fix(console): using houdini inline mutations and leveraging cache

apps/console/src/routes/(app)/profile/+page.gql

@@ -1,4 +1,6 @@
-query GetUser($userId: uuid!) @cache(policy: NetworkOnly) {
+# CacheOrNetwork is default cache strategy.
+# We are leveraging Houdini's Optimistic updates for this usecase
+query GetUser($userId: uuid!) @cache(policy: CacheOrNetwork) {
   # get all fragments needed for profile page.
   user(id: $userId) @loading(cascade: true) {
     id
@@ -15,7 +17,7 @@ query GetUser($userId: uuid!) @cache(policy: NetworkOnly) {
       role
       isDefaultRole
     }
-    securityKeys(order_by: { nickname: asc })  @list(name: "SecurityKeys") {
+    securityKeys(order_by: { nickname: asc })  @list(name: "Security_Keys") {
       __typename
       ...SecurityKeyFragment
     }

apps/console/src/routes/(app)/profile/+page.ts

@@ -25,6 +25,8 @@ export const load: PageLoad = async (event) => {
     log.error('not authenticated');
     throw error(400, 'not authenticated');
   }
+  // this load function will be rerun if manually invalidated elsewhere by calling `invalidate('app:profile')`.
+  // event.depends('app:profile');
   return {
     ...(await load_GetUser({
       event,
@@ -37,3 +39,4 @@ export const load: PageLoad = async (event) => {
     })),
   };
 };
+

apps/console/src/routes/(app)/profile/components/security-key-form.svelte

@@ -14,6 +14,7 @@ import { Loader, LoaderCircle, MoreHorizontal } from 'lucide-svelte';
 import SuperDebug, { superForm, setMessage, setError, defaults } from 'sveltekit-superforms';
 import type { ErrorStatus } from 'sveltekit-superforms';
 import { zod } from 'sveltekit-superforms/adapters';
+import { cache } from '$houdini';
 
 // Variables
 const log = new Logger('profile:keys:browser');
@@ -58,6 +59,10 @@ const form = superForm(defaults(zod(webAuthnSchema)), {
     } as const;
     setMessage(form, message);
     handleMessage(message, toastStore);
+     // Since addSecurityKey() is not using houdini client,
+     // we have to manually invalidate cache.
+    // Mark all type 'authUserSecurityKeys' stale
+    cache.markStale('authUserSecurityKeys')
   },
 });
 

apps/console/src/routes/(app)/profile/components/security-key.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { invalidateAll } from '$app/navigation';
 import type { SecurityKeyFragment } from '$houdini';
-import { PendingValue, RemoveSecurityKeyStore, cache, fragment, graphql } from '$houdini';
+import { PendingValue, cache, fragment, graphql } from '$houdini';
 import { handleMessage } from '$lib/components/layout/toast-manager';
 import { getNhostClient } from '$lib/stores/nhost';
 import { getToastStore } from '@skeletonlabs/skeleton';
@@ -19,7 +19,7 @@ const toastStore = getToastStore();
 const nhost = getNhostClient();
 
 export let securityKey: SecurityKeyFragment;
-$: securityKeyFragment = fragment(
+$: data = fragment(
   securityKey,
   graphql`
     fragment SecurityKeyFragment on authUserSecurityKeys {
@@ -29,15 +29,22 @@ $: securityKeyFragment = fragment(
   `,
 );
 
-$: ({ id, nickname } = $securityKeyFragment);
+$: ({ id, nickname } = $data);
 
 //  $: loading = $securityKeyFragment.__typename === PendingValue;
 
 /**
  * delete handler
  */
 let isDeleting = false;
-const deleteSecurityKey = new RemoveSecurityKeyStore();
+const deleteSecurityKey = graphql(`
+  mutation RemoveSecurityKey($id: uuid!) {
+    deleteAuthUserSecurityKey(id: $id) {
+      ...Security_Keys_remove
+    }
+  }
+`);
+
 const handleDelete = async () => {
   // before
   isDeleting = true;
@@ -85,9 +92,6 @@ const handleDelete = async () => {
         type: 'success',
       };
       handleMessage(message, toastStore);
-
-      cache.markStale();
-      await invalidateAll();
     } else {
       errors.push(`Cannot  delete security key: ${nickname}. Data returned from mutation is falsey.`);
       handleMessage(

apps/console/src/routes/(auth)/signin/+page.server.ts

@@ -5,7 +5,8 @@ import { pwSchema, pwlSchema } from '$lib/schema/user';
 import { limiter } from '$lib/server/limiter/limiter';
 import { setNhostSessionInCookies } from '$lib/server/utils/nhost';
 import type { NhostClient, Provider } from '@nhost/nhost-js';
-import { Logger, sleep } from '@spectacular/utils';
+import { Logger } from '@spectacular/utils';
+import { setTimeout } from 'node:timers/promises';
 import { fail } from '@sveltejs/kit';
 import { redirect as redirectWithFlash } from 'sveltekit-flash-message/server';
 import { message, setError, superValidate } from 'sveltekit-superforms';
@@ -63,7 +64,7 @@ export const actions = {
       );
     }
 
-    await sleep(2000);
+    await setTimeout(2000);
 
     if (!form.valid) return fail(400, { form });
 

apps/console/src/routes/+layout.server.ts

@@ -2,7 +2,7 @@ import { VERCEL_ENV } from '$env/static/private';
 import { Logger } from '@spectacular/utils';
 import { loadFlash } from 'sveltekit-flash-message/server';
 
-const log = new Logger('server:layout');
+const log = new Logger('root:layout:server');
 
 export const load = loadFlash(
   async ({

apps/console/src/routes/+layout.svelte

@@ -26,7 +26,7 @@ import { setupViewTransition } from 'sveltekit-view-transition';
 import '../app.pcss';
 import { setNhostClient } from '$lib/stores/nhost';
 
-const log = new Logger('layout:root:browser');
+const log = new Logger('root:layout:browser');
 
 export let data;
 

docs/awesome-sveltekit.md

@@ -150,6 +150,7 @@ Awesome **SvelteKit** Links
 - [ReShared](https://reshared.org/) is community things sharing webapp. OSS, implemented with **nhost**.
   - [repo](https://github.com/altschuler/reshared/)
 - [game-chronicle](https://github.com/ItsCentric/game-chronicle) - Use Superforms, shadcn-svelte, formsnap, tauri  for native app
+- [whispering](https://github.com/braden-w/whispering) - Svelte5, tauri, OpanAI, audio capture
 - [climbing_noteboo](https://github.com/diericx/climbing_notebook) - Use skeleton, Superforms, sveltekit-flash-message
 - [Vercel Toolbar and Feature Flags SvelteKit Starter](https://github.com/vercel/examples/tree/main/toolbar/toolbar-feature-flags-sveltekit), [Demo](https://toolbar-feature-flags-sveltekit.vercel.app/)
 - [JavaFlavors](https://github.com/Critteros/JavaFlavors/tree/main/web) - use `houdini` and `setClientSession()`, drizzle, superforms, shadcn-svelte