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