@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/