graphql cliente vue con apollo

antes que nada la aplicacion server grapql la tenemos hecha en laravel 5.8

y para que nos de errores de CORS, debemos instalarlo, por ejemplo este libreria:

composer require barryvdh/laravel-cors

y luego editar el archivo config/graphql.php

'middleware' => [\Barryvdh\Cors\HandleCors::class],

Creamos un proyecto Vue, usando Vue cli

npm install -g @vue/cli-service-global
vue create aplicacion-cliente
npm run serve --------------->levantara el proyecto en http://localhost:8080/

vamos a usar las librerias vue apollo

https://vue-apollo.netlify.com/

entonces dentro de la carpeta del proyecto ejecutamos el sgt comando:

vue add apollo

Editar el archivo HelloWorld.vue

en la seccion de script:

import gql from 'graphql-tag';

export default {
...
data() {
return {
cities: [],
city: null
}
},
apollo: {
cities: gql`{
cities{
name
}
}`,
},

y en el archivo vue-apollo.js
agregamos la url del server al cual nos vamos a apuntar
const httpEndpoint = process.env.VUE_APP_GRAPHQL_HTTP || 'http://127.0.0.1:8000/graphql'


si recargamos la pagina, al  inspeccionarla vamos a la pestaña de Vue
y si hacemos click en la ultima parte de la estructura veremos
las cities cargadas.

ahora implementemos una llamada a una mutation, en nuestro ejemplo para crear una city

volvemos a la seccion script del archivo HelloWorld.vue y debajo de apollo...

methods: {
handleClick() {
this.$apollo.mutate({
mutation: gql`mutation {
createCity(name: "La Paz") {
id
name
}
}`,
})
}
}

ese metodo ahora se lo asignamos al evento click que creamos en esa misma pagina

<div class="hello"> <h1>{{ msg }}</h1>
  <button @click="handleClick()">Test Mutation</button>

 AL recargar la pagina y al hacer click en ese boton se creará el nuevo registro

No hay comentarios:

Publicar un comentario

linux ubuntu mint actualizar chrome

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