# 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>
DerniĂšre mise Ă  jour: 11/02/2021, 11:08:30