@NIkkitaFTW GRAPHQL + APOLLO + VUE = MAGIC
A presentation at GraphQL Europe in June 2018 in Berlin, Germany by Sara Vieira
@NIkkitaFTW GRAPHQL + APOLLO + VUE = MAGIC
@NIkkitaFTW I HAVE UNICORN STICKERS
@NIkkitaFTW MY NAME IS SARA
@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 LIVES IN THE MIDDLE OF NOWHERE
@NIkkitaFTW I ADORE VUE
@NIkkitaFTW I FEEL LIKE VUE IS LIKE THE HARRY POTTER OF JS LIBRARIES
@NIkkitaFTW HAVE YOU EVER MET ANYONE THAT HATES HARRY POTTER ?
@NIkkitaFTW POINT PROVEN
@NIkkitaFTW ALSO! 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 COMPONENTS
" require ( ' ../queries/SPEAKERS.gql ' ) "
<template
" { result: { loading, error, data } } "
" loading "
Loading </span>
<div v-if = " data&&
! loading "
<ul v-if = " data . allSpeakers . length " > <li v-for = " s in data . allSpeakers "" s . id "
" s . photo . url "
" s . name " />
<span> {{s . name }} </span> </li> </ul> <div v-else" empty "
No Speakers match your search
@NIkkitaFTW MUTATION COMPONENTS
mutation
createSpeaker ( $name : String ! ) {
createSpeakers ( name : $name ) {
id
name
}
}
“ require ( ' ../queries/ADD_SPEAKER.gql ' ) "
" { name } ”
“onU pdate "
" onDone "
<template
" { mutate, loading, error } "
<form @submit.prevent = " mutate " >" text "
“ Name "
" name " />
" submit "
Add Speaker </button>
" error "
Failed </span>
" loading "
Loading </span>
</form> </template> </ApolloMutation> </template>
@NIkkitaFTW THE UPDATE FUNCTION
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 DEMO https://codesandbox.io/s/lpoy839pm
@NIkkitaFTW APOLLO-LINK-STATE DEMO https://codesandbox.io/s/x2jr96r8pp
THANK YOU $ https://apollo-vue-love.now.sh/
