una llamada graphql y dentro otra llamada queries
donde guardaremos nuestras queries.
Crearemos ahi el archivo categories.gql
query{
categories{
id
name
}
}
luego en Home.vue
<template>
<div class="home">
<ApolloQuery :query="require('../graphql/queries/categories.gql')">
<template slot-scope="{ result: { data, loading } }">
<div v-if="loading">Loading...</div>
<ul v-else>
<li v-for="category of data.categories" :key="category.id" class="user">
{{ category.name }}
</li>
</ul>
</template>
</ApolloQuery>
</div>
</template>
si recargamos la pagina podremos ver el listado de categories
sin embargo aunque la carga no sea inmediata, el mensaje de "loading..." no aparece.
para que funcione vamos a modificar las sgts lineas:
<template slot-scope="{ result: { data, loading } }">
<!-- Some content -->
<div v-if="loading">Loading...</div>
ahora queremos que al clickear sobre una categoria nos liste los libros que tenga esa categoria.
para eso primero creamos el archivo category.gql
query($id: ID!){
category(id: $id){
id
name
books{
id
title
author
image
}
}
}
luego en nuestro codigo agregamos
el bloque para mostrar los libros
<ApolloQuery :query="require('../graphql/queries/category.gql')" :variables="{id: selectedCategory}">
<template slot-scope="{ result: { data, loading }, isLoading }">
<div v-if="isLoading">Loading...</div>
<div v-else>
<div v-for="book of data.category.books" :key="book.id" class="link-margin">
{{ book.title }}.{{ book.title }}
</div>
</div>
</template>
</ApolloQuery>
notar que inicialmente se cargaran los libros de la categoria 1
para lo cual
en la seccion de script
<script>
// @ is an alias to /src
export default{
data(){
return {
selectedCategory : 1
}
},
y para hacer dinamica la pagina creamos el metodo que le asigna un valor a la variable "selectedCategory" segun la categoria que clickeemos
en la misma seccion de script, y debajo de data, escribimos:
methods: {
selectCategory(category){
this.selectedCategory = category
}
}
y en la seccion de categorias implementamos el evento click para que llame a ese metodo
<a href="#" v-for="category of data.categories" :key="category.id" class="link-margin"
@click="selectCategory(category.id)">
{{ category.name }}
</a>
nota:
posiblemente aunque la aplicacion funcione en la terminal el Eslint de errores o warnings
que no tengan sentido
para evitarlos
crear en la raiz del proyecto un archivo llamado
.eslintignore
y adentro escribir la sgt linea
*/*.gql
