GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN...
30
@NIkkitaFTW GRAPHQL + APOLLO + VUE = MAGIC
Transcript of GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN...
@NIkkitaFTW
GRAPHQL + APOLLO + VUE = MAG IC
@NIkkitaFTW
I HAVE UN ICORN S T I CKERS
@NIkkitaFTW
MY N AME I S S ARA
@NikkitaFTW
Front End developer at YLD
Really into shitty movies
Really into football
Lives out of airbnb’s
*please y’all need to watch troll 2*
@NIkkitaFTW
L I VES IN THE M IDDLE OF NOWHERE
@NIkkitaFTW
I ADORE VUE
@NIkkitaFTW
I F EEL L IKE VUE I S L IKE THE HARRY PO TTER OF J S L IBRAR IES
@NIkkitaFTW
HAVE YOU EVER MET ANYONE THAT HATES HARRY PO TTER ?
@NIkkitaFTW
PO INT PROVEN
@NIkkitaFTW
AL SO! PERFECT DAY
https://hubble.js.org/react-vs-vue/
@NIkkitaFTW
🦄🎉#🎉🦄
@NIkkitaFTW
HOW?
import Vue from "vue" import App from "./App" import ApolloClient from "apollo-boost" import VueApollo from "vue-apollo"
const apolloProvider = new VueApollo({ defaultClient: new ApolloClient({ uri: "https://api.graphcms.com/simple/v1/awesomeTalksClone" }) })
Vue.use(VueApollo)
new Vue({ el: "#app", provide: apolloProvider.provide(), render: h =>" h(App) })
@NIkkitaFTW
DONE!
@NIkkitaFTW
QUERY COMPONENT S
<template> <ApolloQuery :query="require('../queries/SPEAKERS.gql')"> <template slot-scope="{ result: { loading, error, data } }"> <span v-if="loading"> Loading </span> <div v-if="data && !loading"> <ul v-if="data.allSpeakers.length"> <li v-for="s in data.allSpeakers" :key="s.id"> <img :src="s.photo.url" :alt="s.name" /> <span>{{s.name}}</span> </li> </ul> <div v-else class="empty"> No Speakers match your search </div> </div> </template> </ApolloQuery> </template>
@NIkkitaFTW
MUTAT ION COMPONENT S
mutation createSpeaker($name: String!) { createSpeakers(name: $name) { id name } }
<template> <ApolloMutation :mutation=“require('../queries/ADD_SPEAKER.gql')"
:variables="{ name }” :update=“onUpdate" @done="onDone">
<template slot-scope="{ mutate, loading, error }"> <form @submit.prevent="mutate"> <input type="text" placeholder=“Name" v-model="name" /> <button type="submit">Add Speaker</button> <span v-if="error">Failed</span> <span v-if="loading">Loading</span> </form> </template> </ApolloMutation> </template>
@NIkkitaFTW
THE UPDATE FUNCT ION
methods: { onDone() { this.name = '' }, onUpdate(cache,{ data: { createdSpeaker }}) { const { allSpeakers } = cache.readQuery({ query: SPEAKERS }) cache.writeQuery({ query: SPEAKERS, data: { allSpeakers: allSpeakers.concat({ ... createdSpeaker, photo: { url: 'http://placekitten.com/100/100', __typename: 'Assets', }, }), }, }) }, },
@NIkkitaFTW
APOLLO - L INK - S TATE DEMO
https://codesandbox.io/s/x2jr96r8pp
