Feathers.js -> Change the layout of the after create hook

Question

I've set up nuxt.js, converting my feathers project. So far it is functioning. Added something through postman appears in my browser on the webpage. There is on difference, namely when I post something the entire dataarray is pushed which doesn't match the initial array.

Sample

{ "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" }

So the first line is how the data is configured to be returned. This is set in my hooks file:

'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);
    };
}

Currently, my client loads the data with this part:

<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 What do I need to do make sure the "this.messages.push(message)" is in the same structure, so only "message_txt". I tried adding the function in the hooks to the "after create" but it doesn't work.

Solving

Okay, so changing the component file of the client gives access to the service, model, and hooks and what else of the service as configured in the client. The 'service.find()' is just there for I copied it from a more complex service where more columns are in the find hook and I only want specific ones.

<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>

With this code, the page still loads but the 'this.listMessages' still also give stuff like the created_at. Also, when I didn't have nuxt and a client/server situation (client and server were one) I didn't need the 'on created' for the list displayed to be updated real time. I still need to have the line for realtime update.

Important note, I just noticed that in postman you also see the entire record information and not the same information as with the GET

So nearly there. I figured out what to do in my hooks file

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

In this file I have the above section. If I change the column in the remove to a 'custom' one (which is in the model) it will work. These two don't work

Answer 1

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

Ahh I think I see what you are really asking now. Only params.query will be passed between the client and the server for security reasons. If you would like to set params.sequelize based on query parameters you have to sanitize and map it in a hook:

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;
  }
});

The other options is to just use Feathers hooks instead. Also, not part of your question, but if you are using sockets anyway, you really don't need a need Axios and the REST stuff updated via methods, you can just tie the service to the socket and use something like RxJS to stream all updates in real time. What you are doing is fine and will work, but with a lot more code to maintain.