# ApolloMutation
Vous pouvez utiliser le composant ApolloMutation
(ou apollo-mutation
) pour invoquer des mutations Apollo directement dans vos templates.
Voici un exemple :
<ApolloMutation
:mutation="gql => gql`
mutation DoStuff ($name: String!) {
someWork (name: $name) {
success
timeSpent
}
}
`"
:variables="{
name
}"
@done="onDone"
>
<template v-slot="{ mutate, loading, error }">
<button :disabled="loading" @click="mutate()">Cliquez ici</button>
<p v-if="error">Une erreur s'est produite: {{ error }}</p>
</template>
</ApolloMutation>
Consultez ApolloQuery pour en savoir plus sur comment Ă©crire des requĂȘtes GraphQL dans le template.
Consultez la référence API pour connaßtre toutes les options disponibles.
# RafraĂźchir le cache
Si la mutation ne met à jour que des objets qui existent déjà en cache (par exemple, qui change des champs existants), vous n'avez pas besoin de faire quoi que ce soit, Apollo Client rafraßchira le cache automatiquement. Cela fonctionnera uniquement si l'objet dans le résultat de la mutation contient les champs __typename
et id
(ou les champs personnalisés que vous utilisez pour normaliser le cache (opens new window)).
Sinon, vous devez dire Ă Apollo Client comment mettre le cache Ă jour avec le rĂ©sultat de la mutation. Par exemple, si la mutation ajoute un nouvel Ă©lĂ©ment, vous devez mettre Ă jour le rĂ©sultat concernĂ© pour pouvoir pousser ce nouvel Ă©lĂ©ment dans la requĂȘte.
# Ajouter un élément
<template>
<ApolloMutation
:mutation="gql => gql`
mutation ($input: SendMessageToThreadInput!) {
sendMessageToThread (input: $input) {
message {
...message
}
}
}
${$options.fragments.message}
`"
:variables="{
threadId,
text
}"
:update="updateCache"
>
<!-- Formulaire -->
</ApolloMutation>
</template>
<script>
import gql from 'gql-tag'
const fragments = {
message: gql`
fragment message on Message {
id
text
user {
id
name
}
}
`
}
export default {
fragments,
props: {
threadId: {
type: String,
required: true
}
},
methods: {
updateCache (store, { data: { sendMessageToThread } }) {
const query = {
query: gql`
query ($threadId: ID!) {
thread (id: $threadId) {
id
messages {
...message
}
}
}
${fragments.message}
`,
variables: {
threadId: this.threadId,
},
}
// Lecture de la requĂȘte depuis le cache
const data = store.readQuery(query)
// Mutation du résultat du cache
data.thread.messages.push(sendMessageToThread.message)
// RĂ©Ă©criture en cache
store.writeQuery({
...query,
data,
})
},
}
}
</script>
# Retirer un élément
<template>
<ApolloMutation
:mutation="gql => gql`
mutation ($input: DeleteMessageFromThreadInput!) {
deleteMessageFromThread (input: $input) {
success
}
}
`"
:variables="{
threadId,
messageId
}"
:update="updateCache"
>
<!-- Formulaire -->
</ApolloMutation>
</template>
<script>
import gql from 'gql-tag'
const fragments = {
message: gql`
fragment message on Message {
id
text
user {
id
name
}
}
`
}
export default {
fragments,
props: {
threadId: {
type: String,
required: true
},
messageId: {
type: String,
required: true
}
},
methods: {
updateCache (store, { data: { deleteMessageFromThread } }) {
const query = {
query: gql`
query ($threadId: ID!) {
thread (id: $threadId) {
id
messages {
...message
}
}
}
${fragments.message}
`,
variables: {
threadId: this.threadId,
},
}
// Lecture de la requĂȘte depuis le cache
const data = store.readQuery(query)
// Recherche de l'élément supprimé
const index = data.thread.messages.findIndex(m => m.id === this.messageId)
if (index !== -1) {
// Mutation du résultat du cache
data.thread.messages.splice(index, 1)
// RĂ©Ă©criture en cache
store.writeQuery({
...query,
data,
})
}
},
}
}
</script>
â ApolloQuery ApolloSubscribeToMore â