<script lang="ts">
	import Composer from '$lib/core/Composer.svelte';
	import { onMount } from 'svelte';
	import type { PageData } from '../../test/$houdini';

	export let data: PageData;

	let composer;

	$: ({ queryTest } = data);

	onMount(async () => {
		composer = await {
			id: 'ComposerGraph',
			component: 'ComposerGraph',
			data: {
				gql: {
					test: $queryTest.data
				}
			},
			machine: {
				initial: 'LOADING',
				states: {
					LOADING: {
						on: {
							TOGGLE: {
								target: 'READY'
							}
						}
					},
					READY: {
						on: {
							TOGGLE: {
								target: 'LOADING'
							}
						}
					}
				}
			}
		};
	});
</script>

<Composer {composer} />
