Comment la réorganisation des éléments d'une liste, et la mise à jour de plusieurs objets, doivent-elles être persistées avec les mutations GraphQL ?

Question

La pile que j'utilise

• Scaphold.io comme mon serveur GraphQL
• Vue Apollo du côté client
• Vue Draggable bibliothèque pour la gestion du glisser-déposer

---

Ce que j'essaie de faire

Je suis en train de créer une application qui présente plusieurs listes aux utilisateurs, chacune d'entre elles contenant plusieurs cartes. Dans une liste, les cartes peuvent être réorganisées par l'utilisateur. Les cartes peuvent également être déplacées d'une liste à une autre, ce qui modifie la liste parente d'une carte et l'ordre des cartes dans la liste source et la liste de destination.

Voici un GIF montrant l'interface utilisateur pour les cartes/listes et le réordonnancement dans mon application. Ce que vous voyez ici se passe du côté client, et les changements ne sont pas persistés dans la base de données :

C'est la requête que j'utilise pour construire mon interface utilisateur :

const foo = gql`
  query foo {
    getAccount(id: "xxxxx") {
      cardLists {        
        edges {
          node {
            id
            name
            cards(orderBy: {field: order, direction: ASC}) {
              edges {
                node {
                  id
                  name
                  order
                }
              }
            }
          }
        }
      }
    }
  }
`

Voici un GIF du projet Vue Draggable qui illustre mieux ce que je fais (notez la valeur "order" dans les données) :

---

Problème

Je ne sais pas comment construire une mutation pour gérer le réordonnancement de manière à ce que la carte déplacée et les changements d'ordre des listes d'origine et de destination soient correctement conservés.

Construire le schéma dans Scaphold signifie que je dois (je pense) utiliser les mutations qu'il fournit. Je ne vois pas comment transmettre plusieurs cartes et listes à une seule mutation afin de pouvoir tout mettre à jour en une seule fois.

Voici un point de terminaison pour un exemple de projet dans Scaphold.io : https://us-west-2.api.scaphold.io/graphql/soreorderingexample

Et voici le schéma généré par Scaphold.io : https://d3uepj124s5rcx.cloudfront.net/items/1e1m2q3F170C2G3M0v2p/schema.json

---

Mes questions

• Quelle est la bonne façon de penser à la persistance des changements de ce type dans GraphQL ?
• Compte tenu des contraintes et des opinions de Scaphold, comment doit se faire ma mutation ?

Answer 1

Je ne connais pas Scaphold, mais vous pouvez soit conserver tous les éléments dans un tableau unique que vous mettez toujours à jour en une seule mutation, soit mettre à jour les éléments de la liste un par un.

La manière la plus simple d'avoir un tri manuel découplé est d'avoir une fonction order: Float que vous définissez comme (prev.order + next.order)/2 à chaque fois que vous voulez déplacer une carte entre deux autres cartes, ou 1 plus/moins que le dernier/premier si vous vous déplacez vers l'arrière/l'avant.

Compte tenu de la précision de la virgule flottante, vous pouvez effectuer cette opération entre les deux mêmes cartes 53 fois avant que la précision ne soit altérée. order ou déplacez manuellement les cartes incriminées vers le haut, puis vers le bas.