# Mutations
Les mutations sont des requĂȘtes qui changent l'Ă©tat de vos donnĂ©es sur votre serveur Apollo.
Pour envoyer une mutation GraphQL, il faut utiliser this.$apollo.mutate()
.
Il existe une application d'exemple (opens new window) focalisée sur les mutations que vopus pouvez consulter.
WARNING
Il n'est pas recommandé d'envoyer les champs __typename
dans les variables, il faut donc éviter d'envoyer les réponses Apollo directement.
methods: {
addTag() {
// On sauvegarde l'entrée utilisateur en cas d'erreur
const newTag = this.newTag
// On la supprime tÎt pour donner une sensation de réactivité à l'interface utilisateur
this.newTag = ''
// Appel Ă la mutation GraphQL
this.$apollo.mutate({
// RequĂȘte
mutation: gql`mutation ($label: String!) {
addTag(label: $label) {
id
label
}
}`,
// ParamĂštres
variables: {
label: newTag,
},
// Mise à jour du cache avec le résultat
// La requĂȘte sera mise Ă jour avec une rĂ©ponse optimiste
// puis avec le résultat de la mutation
update: (store, { data: { addTag } }) => {
// Lecture de la donnĂ©e depuis le cache pour cette requĂȘte
const { tags } = store.readQuery({ query: TAGS_QUERY })
// Ajout du libellé de la mutation en fin de tableau
const tagsCopy = tags.slice()
tagsCopy.push(addTag)
// RĂ©Ă©criture en cache
store.writeQuery({ query: TAGS_QUERY, { tags: tagsCopy }})
},
// Interface utilisateur optimiste
// UtilisĂ© comme "fausse" donnĂ©e dĂšs qu'une requĂȘte est rĂ©alisĂ©e afin que
// l'interface réagisse rapidement, pour une meilleur expérience
optimisticResponse: {
__typename: 'Mutation',
addTag: {
__typename: 'Tag',
id: -1,
label: newTag,
},
},
}).then((data) => {
// RĂ©sultat
console.log(data)
}).catch((error) => {
// Erreur
console.error(error)
// On restaure l'entrée utilisateur initiale
this.newTag = newTag
})
},
},
# Exemple cÎté serveur
export const schema = `
type Tag {
id: Int
label: String
}
type Query {
tags: [Tag]
}
type Mutation {
addTag(label: String!): Tag
}
schema {
query: Query
mutation: Mutation
}
`
// Faux générateur de mots
import faker from 'faker'
// Générons quelques libellés
var id = 0
var tags = []
for (let i = 0; i < 42; i++) {
addTag(faker.random.word())
}
function addTag (label) {
let t = {
id: id++,
label,
}
tags.push(t)
return t
}
export const resolvers = {
Query: {
tags (root, args, context) {
return tags
},
},
Mutation: {
addTag (root, { label }, context) {
console.log(`adding tag '${label}'`)
return addTag(label)
},
},
}
â RequĂȘtes Souscriptions â