<template>
	<div class="gql_showcase">
		<p>See GraphQl in action:</p>
		<ul v-if="data">
			<li v-for="user in data.users"
				>{{ user.userName }}
				<ul v-if="user.todos">
					<li v-for="todo in user.todos">{{ todo.text }}</li>
				</ul>
			</li>
		</ul>
	</div>
</template>

<script setup>
	import { useQuery } from 'villus'
	import { gql } from 'graphql-tag'

	const getUsers = gql`
		query getUsers {
			users {
				userName
				todos {
					text
				}
			}
		}
	`

	const { data } = useQuery({
		query: getUsers
	})
</script>
<style scoped>
	.gql_showcase {
		text-align: left;
	}
</style>
