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

<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 MUTATION COMPONENTS

mutation
createSpeaker ( $name : String ! ) {
createSpeakers ( name : $name ) {
id
name
}
}

<template>
<ApolloMutation :mutation
“ require ( ' ../queries/ADD_SPEAKER.gql ' ) "
:variables
" { name } ”
:update
“onU pdate "
@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 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/

Sara Vieira
@saravieira

1 / 30

We all here love GraphQL and we have seen how amazing Apollo can be in combination with React. But what about Vue? Vue is by itself reactive and that makes it so perfect for GraphQL and Apollo. Let's look at how to use this awesome combination to make awesomer things.