graphql client apollo vue

crearemos bajo la carpeta src
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


No hay comentarios:

Publicar un comentario

linux ubuntu mint actualizar chrome

 desde una terminal: $ sudo apt update $ sudo apt install google-chrome-stable