Saltar al contenido

Vue GraphQL y Apolo tutorial para la beginnersDec, 4thIn este tutorial, vamos a aprender a buscar a y actualizar el …

marzo 13, 2020

 

En este tutorial, vamos a aprender a buscar a y actualizar los datos de las API graphql en vuejs usar el cliente de Apolo.

Nota: Estamos utilizando la API graphql GitHub para los fines de aprendizaje.

si atascado en cualquier lugar en este tutorial, a continuación, consulte el repositorio de código final en GitHub

Creación de Vue aplicación

Este tutorial asume que ya ha instalado cli vue en su PC.

Vamos a crear una nueva aplicación vue ejecutando el siguiente comando en el terminal.

vue create vue-apollo-tutorial && cd $_

Este comando descarga por encima de los archivos relacionados La aplicación vue vue-interior del Apollo-tutorial y cambia la carpeta a su directorio de trabajo actual vue-apolo-tutorial.

Ahora es necesario instalar los paquetes de clientes Apolo del NPM.

Instalación apolo paquetes cliente

npm i vue-apollo apollo-boost graphql

Este comando anterior descargará los tres paquetes que son vue-apolo, apolo-impulso, y graphql.

Conexión con nuestra aplicación de conexión vue GitHub GraphQL API

Vamos con la API de GitHub Graphql.

abierto su cuenta de GitHub y vaya a Configuración y luego haga clic en Configuración de desarrolladores y generan acceso personal de token mediante la selección de los campos.

Nota: copia el token de acceso personal y guardarlo en su PC porque el token sólo es visible una vez.

Ahora abra su main.js archivo y añadir el siguiente código de acceso personal con su ejemplo símbolo portador 2834903039-3-389-032.

import Vue from 'vue'
import VueApollo from 'vue-apollo';
import ApolloClient from 'apollo-boost'
import App from './App.vue'

Vue.use(VueApollo);

//creating apollo client
const client = new ApolloClient({ uri: "https://api.github.com/graphql", request: operation => { operation.setContext({ headers: { authorization: 'Bearer '+'your-personal-access-token' }, }); }});
const apolloProvider = new VueApollo({
defaultClient: client,
})

//injecting apolloProvider to root vue instance
new Vue({
render: h => h(App),
apolloProvider,
}).$mount('#app')

Aquí importar un constructor ApolloClient del paquete Apollo-boost y una instancia del cliente por passsing la URI.

uri : El criterio de valoración graphql que estamos utilizando para recuperar los datos.

solicitar : Para cada solicitud , estamos enviando la cabecera de autorización para verificar el usuario actual.

Ahora puede enviar consultas y mutaciones a nuestro punto final graphql de cualquier componente vue. medios

consultas

En GraphQL consulta para obtener los datos de la API. escritura de

dejar que nuestra primera consulta que nos ayuda a conseguir nuestro nombre GitHub y correo electrónico.