fix(console): trying fragments for Rules with hudini

apps/console/houdini.config.js

@@ -21,6 +21,14 @@ const config = {
       'x-hasura-role': 'manager',
     },
   },
+  // features: {
+  //   runtimeScalars: {
+  //     UserId: {
+  //       type: 'uuid',
+  //       resolve: ({ session }) => session?.userId,
+  //     },
+  //   },
+  // },
   plugins: {
     // 'houdini-plugin-svelte-global-stores': {
     // 	generate: 'all'

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

@@ -5,14 +5,14 @@ import { nhost, user } from '$lib/stores/user';
 import type { AuthErrorPayload } from '@nhost/nhost-js';
 import { Avatar } from '@skeletonlabs/skeleton';
 import { Debug } from '@spectacular/skeleton/components';
-import SecurityKeysCard from './security-keys.svelte';
 import type { PageData } from './$houdini';
+import SecurityKeysCard from './security-keys.svelte';
 
 // https://github.com/nhost/nhost/blob/main/examples/react-apollo/src/profile/security-keys.tsx
 export let data: PageData;
 
 $: ({ GetUser } = data);
-  $: securityKeys = $GetUser.data?.user?.securityKeys ?? [];
+$: securityKeys = $GetUser.data?.user?.securityKeys ?? [];
 
 // Variables
 let nickname: string;

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

@@ -1,47 +1,48 @@
 <script lang="ts">
-  import { fade } from 'svelte/transition';
-  import { RemoveSecurityKeyStore, fragment, graphql } from '$houdini';
-  import { Logger } from '@spectacular/utils';
- import type { SecurityKey } from '$houdini';
+import { RemoveSecurityKeyStore, fragment, graphql } from '$houdini';
+import type { SecurityKey } from '$houdini';
+import { Logger } from '@spectacular/utils';
+import { fade } from 'svelte/transition';
 
-  const log = new Logger('auth:profile:browser');
+const log = new Logger('auth:profile:browser');
 
-  let isDeleting = false;
+let isDeleting = false;
 
-  export let securityKey: SecurityKey;
+export let securityKey: SecurityKey;
 
- $: data = fragment(
-    securityKey,
-    graphql`
+$: data = fragment(
+  securityKey,
+  graphql`
       fragment SecurityKey on authUserSecurityKeys {
         nickname
         id
       }
     `,
-  );
+);
 
-  const deleteSecurityKey = new RemoveSecurityKeyStore();
+$: ({ id, nickname } = $data);
 
-  const handleDelete = async () => {
-    // before
-    isDeleting = true;
-    const { errors } = await deleteSecurityKey.mutate({ id: $data.id });
+const deleteSecurityKey = new RemoveSecurityKeyStore();
 
-    if (errors?.length) {
-      log.error({errors})
-      // window.location.reload();
-      return;
-    }
+const handleDelete = async () => {
+  // before
+  isDeleting = true;
+  const { errors } = await deleteSecurityKey.mutate({ id });
 
-    // after
-    // No need to reset as comments disappear.
-  };
+  if (errors?.length) {
+    log.error({ errors });
+    // window.location.reload();
+    return;
+  }
 
+  // after
+  // No need to reset as comments disappear.
+};
 </script>
 
  <div class="relative">
     <div class="flex items-center">
-      <p class="font-bold">{$data.nickname}</p>
+      <p class="font-bold">{nickname}</p>
       <!-- <time class="ml-2 text-sm font-medium text-zinc-500" title={createdAt.toISO()}>
         {createdAt.toFormat('MM/dd/yyyy')}
       </time> -->

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

@@ -1,18 +1,16 @@
 <script lang="ts">
-  import SecurityKeyItem from './security-key.svelte';
-  import { quintOut } from 'svelte/easing';
-  import { flip } from 'svelte/animate';
-  import { fade } from 'svelte/transition';
-  import type { SecurityKey } from '$houdini';
+import type { SecurityKey } from '$houdini';
+import { flip } from 'svelte/animate';
+import { quintOut } from 'svelte/easing';
+import { fade } from 'svelte/transition';
+import SecurityKeyItem from './security-key.svelte';
 
-
-  export const defaultDE = {
+export const defaultDE = {
   duration: 450,
   easing: quintOut,
 };
 
-
-  export let securityKeys: SecurityKey[];
+export let securityKeys: SecurityKey[];
 </script>
 
 <div class="divide-y divide-slate-200">

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

@@ -0,0 +1,21 @@
+query Rules {
+  rules(order_by: { createdAt: asc }) @list(name: "Rules") {
+    action
+    annotations
+    appId
+    description
+    destination
+    destinationPort
+    direction
+    displayName
+    protocol
+    shared
+    source
+    sourcePort
+    throttleRate
+    updatedAt
+    updatedBy
+    weight
+    ...RuleCardFields
+  }
+}

apps/console/src/routes/(app)/rules/+page.svelte

@@ -1,12 +1,26 @@
 <script lang="ts">
-import { user } from '$lib/stores/user';
-import { Debug } from '@spectacular/skeleton/components';
+import type { PageData } from './$houdini';
+import RulesCard from './rules.svelte';
+
+export let data: PageData;
+
+$: ({ Rules: RulesData } = data);
+$: rules = $RulesData.data?.rules ?? [];
 </script>
 
 <svelte:head>
-  <title>Datablocks | Settings</title>
-  <meta name="description" content="Account Settings" />
+  <title>Datablocks | Rules</title>
+  <meta name="description" content="Rules list" />
 </svelte:head>
 
-<h2 class="h2">Settings</h2>
-<Debug data={$user}/>
+<h2 class="h2">Rules</h2>
+
+  {#if $RulesData.fetching}
+    <span>loading...</span>
+  {:else}
+      <span>done....</span>
+      <RulesCard {rules}/>
+  {/if}
+
+
+

apps/console/src/routes/(app)/rules/rule.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+import { fragment, graphql } from '$houdini';
+import type { RuleCardFields } from '$houdini';
+
+export let rule: RuleCardFields;
+
+$: data = fragment(
+  rule,
+  graphql`
+      fragment RuleCardFields on rules {
+        id
+        createdAt
+        updatedAt
+        organization
+        tags
+      }
+    `,
+);
+
+$: ({ id, createdAt, updatedAt, organization, tags } = $data);
+</script>
+
+<div
+  class="py-2.5 duration-200"
+  role="listitem"
+>
+  <div class="relative">
+    <div class="flex items-center">
+      <p class="font-bold">{id}</p>
+      <p class="font-bold">{createdAt}</p>
+      <p class="font-bold">{updatedAt}</p>
+      <p class="font-bold">{organization}</p>
+      <p class="font-bold">{tags}</p>
+    </div>
+  </div>
+</div>

apps/console/src/routes/(app)/rules/rules.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+import type { Rule } from '$houdini';
+import { flip } from 'svelte/animate';
+import { quintOut } from 'svelte/easing';
+import { fade } from 'svelte/transition';
+import RuleItem from './rule.svelte';
+
+export const defaultDE = {
+  duration: 450,
+  easing: quintOut,
+};
+
+export let rules: Rule[];
+
+export function hasId(obj) {
+  if (obj == null || typeof obj !== 'object') return false;
+  return !!('id' in obj);
+}
+
+export function toWithId(obj) {
+  if (hasId(obj)) return obj;
+  throw new Error('.id is required');
+}
+
+$: rulesWithId = rules.map(toWithId);
+</script>
+
+<div class="divide-y divide-slate-200">
+  {#each rulesWithId as rule (rule.id)}
+    <div transition:fade={defaultDE} animate:flip={defaultDE}>
+      <RuleItem {rule} />
+    </div>
+  {/each}
+</div>