From 783548581c5b4a79903e9c99625f1fc4fd7041cb Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Mon, 7 Aug 2023 15:01:30 +0200
Subject: [PATCH] added basic graphql mapping

---
 .../components/refactor/ComposerGraph.svelte  |  5 ++
 src/lib/core/refactor/Composer.svelte         |  9 ++
 src/routes/graphql/+page.svelte               | 88 +++++++++++--------
 3 files changed, 63 insertions(+), 39 deletions(-)

diff --git a/src/lib/components/refactor/ComposerGraph.svelte b/src/lib/components/refactor/ComposerGraph.svelte
index ce00d1d..e517d7b 100644
--- a/src/lib/components/refactor/ComposerGraph.svelte
+++ b/src/lib/components/refactor/ComposerGraph.svelte
@@ -12,5 +12,10 @@
 				<p>{todo.text}</p>
 			{/each}
 		{/if}
+		<br />
+		dataTest:
+		{#if $me.x}
+			{JSON.stringify($me.x)}
+		{/if}
 	</section>
 </div>
diff --git a/src/lib/core/refactor/Composer.svelte b/src/lib/core/refactor/Composer.svelte
index 9c8330e..baba950 100644
--- a/src/lib/core/refactor/Composer.svelte
+++ b/src/lib/core/refactor/Composer.svelte
@@ -59,6 +59,15 @@
 			if (component.data?.map) {
 				subscribeAndMapQueries(component.id, component.data.map);
 			}
+			if (component.data?.gql) {
+				getComposerStore(component.id).update((storeValue) => ({
+					...storeValue,
+					x: {
+						...storeValue.x,
+						...component.data.gql
+					}
+				}));
+			}
 		}
 		getComposerStore(component.id).update((storeValue) => ({
 			...storeValue,
diff --git a/src/routes/graphql/+page.svelte b/src/routes/graphql/+page.svelte
index 3fa1ba7..bc5416c 100644
--- a/src/routes/graphql/+page.svelte
+++ b/src/routes/graphql/+page.svelte
@@ -1,58 +1,68 @@
 <script lang="ts">
 	import type { PageData } from '../test/$houdini';
-	import Composer from '$lib/core/refactor/composer.svelte';
+	import Composer from '$lib/core/refactor/Composer.svelte';
 	import { queryTodos } from '$lib/data/queryTodos';
+	import { onMount } from 'svelte';
 
 	export let data: PageData;
 
+	let composer;
+
 	$: ({ queryTest } = data);
 
-	let composer = {
-		id: 'ComposerParent',
-		machine: {
-			initial: 'NOTREADY',
-			states: {
-				NOTREADY: {
-					on: { TOGGLE: 'READY' }
-				},
-				READY: {
-					on: { TOGGLE: 'NOTREADY' }
-				}
-			}
-		},
-		children: [
-			{
-				id: 'ComposerGraph',
-				component: 'ComposerGraph',
-				data: {
-					map: {
-						todos: queryTodos
+	onMount(async () => {
+		composer = await {
+			id: 'ComposerParent',
+			machine: {
+				initial: 'NOTREADY',
+				states: {
+					NOTREADY: {
+						on: { TOGGLE: 'READY' }
+					},
+					READY: {
+						on: { TOGGLE: 'NOTREADY' }
 					}
-				},
-				machine: {
-					initial: 'LOADING',
-					states: {
-						LOADING: {
-							on: {
-								TOGGLE: {
-									target: 'READY'
-								}
-							}
+				}
+			},
+			children: [
+				{
+					id: 'ComposerGraph',
+					component: 'ComposerGraph',
+					data: {
+						map: {
+							todos: queryTodos
 						},
-						READY: {
-							on: {
-								TOGGLE: {
-									target: 'LOADING'
+						gql: {
+							test: await $queryTest.data
+						}
+					},
+					machine: {
+						initial: 'LOADING',
+						states: {
+							LOADING: {
+								on: {
+									TOGGLE: {
+										target: 'READY'
+									}
+								}
+							},
+							READY: {
+								on: {
+									TOGGLE: {
+										target: 'LOADING'
+									}
 								}
 							}
 						}
 					}
 				}
-			}
-		]
-	};
+			]
+		};
+	});
 </script>
 
-{JSON.stringify($queryTest.data, null, 2)}
+{#if $queryTest}
+	{JSON.stringify($queryTest.data, null, 2)}
+{/if}
 
 <Composer {composer} />