graphql + apollo + vue = magic · graphql + apollo + vue = magic @nikkitaftw i have unicorn...
TRANSCRIPT
![Page 1: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/1.jpg)
@NIkkitaFTW
GRAPHQL + APOLLO + VUE = MAG IC
![Page 2: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/2.jpg)
@NIkkitaFTW
I HAVE UN ICORN S T I CKERS
![Page 3: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/3.jpg)
![Page 4: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/4.jpg)
@NIkkitaFTW
MY N AME I S S ARA
![Page 5: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/5.jpg)
@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*
![Page 6: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/6.jpg)
@NIkkitaFTW
L I VES IN THE M IDDLE OF NOWHERE
![Page 7: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/7.jpg)
@NIkkitaFTW
I ADORE VUE
![Page 8: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/8.jpg)
@NIkkitaFTW
I F EEL L IKE VUE I S L IKE THE HARRY PO TTER OF J S L IBRAR IES
![Page 9: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/9.jpg)
@NIkkitaFTW
HAVE YOU EVER MET ANYONE THAT HATES HARRY PO TTER ?
![Page 10: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/10.jpg)
@NIkkitaFTW
PO INT PROVEN
![Page 11: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/11.jpg)
@NIkkitaFTW
AL SO! PERFECT DAY
![Page 12: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/12.jpg)
https://hubble.js.org/react-vs-vue/
![Page 13: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/13.jpg)
@NIkkitaFTW
🦄🎉#🎉🦄
![Page 14: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/14.jpg)
![Page 15: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/15.jpg)
![Page 16: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/16.jpg)
@NIkkitaFTW
HOW?
![Page 17: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/17.jpg)
![Page 18: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/18.jpg)
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) })
![Page 19: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/19.jpg)
@NIkkitaFTW
DONE!
![Page 20: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/20.jpg)
@NIkkitaFTW
QUERY COMPONENT S
![Page 21: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/21.jpg)
<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>
![Page 22: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/22.jpg)
@NIkkitaFTW
MUTAT ION COMPONENT S
![Page 23: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/23.jpg)
mutation createSpeaker($name: String!) { createSpeakers(name: $name) { id name } }
![Page 24: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/24.jpg)
<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>
![Page 25: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/25.jpg)
@NIkkitaFTW
THE UPDATE FUNCT ION
![Page 26: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/26.jpg)
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', }, }), }, }) }, },
![Page 28: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/28.jpg)
@NIkkitaFTW
APOLLO - L INK - S TATE DEMO
https://codesandbox.io/s/x2jr96r8pp
![Page 29: GRAPHQL + APOLLO + VUE = MAGIC · GRAPHQL + APOLLO + VUE = MAGIC @NIkkitaFTW I HAVE UNICORN STICKERS @NIkkitaFTW MY NAME IS SARA @NikkitaFTW Front End developer at YLD Really into](https://reader031.vdocuments.net/reader031/viewer/2022040410/5eca7dad5ba6a22e8418b213/html5/thumbnails/29.jpg)