39 lines
599 B
Vue
39 lines
599 B
Vue
|
<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>
|