Feathers.js -> Modifier la disposition du crochet après création

Question

J'ai configuré nuxt.js, en convertissant mon projet de plumes. Jusqu'à présent, cela fonctionne. Ajouté quelque chose par le facteur apparaît dans mon navigateur sur la page Web. Il y a une différence, c'est-à-dire quand je publie quelque chose, tout le dataarray est poussé, ce qui ne correspond pas au tableau initial.

Exemple

{ "message_txt": "Hello todays2" } 
{ "id": 17, "message_txt": "Hello YESd", "updated_at": "2017-03-25T11:15:44.000Z", "created_at": "2017-03-25T11:15:44.000Z" } 

La première ligne est la façon dont les données est configuré pour être retourné. Ceci est défini dans mon fichier crochets:

'use strict'; 

const globalHooks = require('../../../hooks/index'); 
const hooks = require('feathers-hooks'); 


exports.before = { 
    all: [], 
    find: [ 
     getRelatedInfo() 
    ], 
    get: [ 
     getRelatedInfo() 
    ], 
    create: [], 
    update: [], 
    patch: [], 
    remove: [] 
}; 

exports.after = { 
    all: [], 
    find: [], 
    get: [], 
    create: [ 
     getRelatedInfo() 
    ], 
    update: [], 
    patch: [], 
    remove: [] 
}; 

function getRelatedInfo() { 
    return function (hook) { 
     hook.params.sequelize = { 
      attributes: [ 
       'message_txt' 
      ], 
      order: [ 
       ['created_at', 'DESC'] 
      ] 
     }; 
     return Promise.resolve(hook); 
    }; 
} 

Actuellement, mon client charge les données de cette partie:

<template> 
    <div> 
     idnex.vue 

     <ul> 
      <li v-for="message in messages"> 
       {{ message }} 
      </li> 
     </ul> 
    </div> 
</template> 

<script> 
    import axios from 'axios'; 
    import feathers from 'feathers/client'; 
    import socketio from 'feathers-socketio/client'; 
    import io from 'socket.io-client'; 

    export default { 
     data: function() { 
      return { 
       messages: [] 
      } 
     }, 
     mounted: function() { 
      axios.get('http://localhost:3001/messages') 
       .then((response) => { 
        this.messages = response.data.data 
       }); 

      const app = feathers().configure(socketio(io('http://localhost:3001'))); 
      app.service('messages').on('created', (message) => { 
       this.messages.push(message); 
      }) 
     } 
    } 
</script> 

Question Que dois-je faire assurer que les « this.messages .push (message) "est dans la même structure, donc seulement" message_txt ". J'ai essayé d'ajouter la fonction dans les crochets à la "après créer" mais cela ne fonctionne pas.

Résolution

Ok, donc changer le fichier composant du client donne accès au service, le modèle et les crochets et quoi d'autre du service tel que configuré dans le client. Le 'service.find()' est juste là pour que je l'ai copié d'un service plus complexe où plus de colonnes sont dans le crochet de recherche et je veux seulement les spécifiques.

<template> 
    <div> 
     idnex.vue 
     todo: eagle.js slideshow 
     todo: first info 

     <ul> 
      <li v-for="message in listMessages"> 
       {{ message }} 
      </li> 
     </ul> 
    </div> 
</template> 

<script> 
    import feathers from 'feathers/client'; 
    import socketio from 'feathers-socketio/client'; 
    import hooks from 'feathers-hooks'; 
    import io from 'socket.io-client'; 
    import * as process from "../nuxt.config"; 

    const vttSocket = io(process.env.backendUrl); 
    const vttFeathers = feathers() 
     .configure(socketio(vttSocket)) 
     .configure(hooks()); 

    const serviceMessage = vttFeathers.service('messages'); 

    export default { 
     layout: 'default', 
     data: function() { 
      return { 
       listMessages: [] 
      } 
     }, 
     mounted: function() { 
      //TODO change the message layout to the correct layout 
      serviceMessage.find({ 
       query: { 
        $sort: { 
         created_at: 1 
        }, 
        $select: [ 
         'message_txt' 
        ] 
       } 
      }).then(page => { 
       this.listMessages = page.data; 
      }); 
      serviceMessage.on('created', (serviceMessage) => { 


       this.listMessages.push(serviceMessage); 
      }); 
     } 
    } 
</script> 

Avec ce code, les charges fixes de page, mais les « this.listMessages » donnent encore aussi des choses comme created_at. De plus, quand je n'avais pas nuxt et une situation client/serveur (le client et le serveur en étaient un) je n'avais pas besoin que le 'sur créé' pour que la liste affichée soit mise à jour en temps réel. Je dois encore avoir la ligne pour la mise à jour en temps réel.

Note importante, je viens de remarquer que dans postman vous voyez aussi les informations ensemble du dossier et non les mêmes informations que le GET

donc presque. J'ai compris ce qu'il faut faire dans mon fichier de crochets

exports.after = { 
    all: [], 
    find: [], 
    get: [], 
    create: [ 
     hooks.remove('createdAt'), 
     hooks.remove('updatedAt') 
    ], 
    update: [], 
    patch: [], 
    remove: [] 
}; 

Dans ce fichier j'ai la section ci-dessus. Si je change la colonne dans la suppression d'une colonne 'personnalisée' (qui est dans le modèle) cela fonctionnera. Ces deux ne fonctionnent pas

Answer 1

this.messages.push (message.message_txt); ? ...

Ahh Je pense que je vois ce que vous demandez vraiment maintenant. Seules les params.query seront transmises entre le client et le serveur pour des raisons de sécurité. Si vous souhaitez définir params.sequelize en fonction des paramètres de la requête que vous devez aseptiser et la carte dans un crochet:

app.service('myservice').before(function(hook) { 
    const query = hook.params.query; 

    hook.params.sequelize = {}; 

    if(query.someSequelizeParameter) { 
    hook.params.sequelize.myParameter = sanitize(query.someSequelizeParameter); 
    delete query.someSequelizeParameter; 
    } 
}); 

Les autres options est d'utiliser simplement des crochets de plumes à la place. De plus, si vous utilisez des sockets, vous n'avez pas vraiment besoin d'Axios et des trucs REST mis à jour via les méthodes, vous pouvez simplement lier le service à la socket et utiliser quelque chose comme RxJS pour streamer tout mises à jour en temps réel. Ce que vous faites est bien et fonctionnera, mais avec beaucoup plus de code à maintenir.