title: Feathers.js -> Change the layout of the after create hook
body: <p>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.</p>
  
  <p>Sample</p>
  
  <pre><code>{ "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" }
  </code></pre>
  
  <p>So the first line is how the data is configured to be returned. This is set in my hooks file:</p>
  
  <pre><code>'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);
      };
  }
  </code></pre>
  
  <p>Currently, my client loads the data with this part:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          idnex.vue
  
          &lt;ul&gt;
              &lt;li v-for="message in messages"&gt;
                  {{ message }}
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      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) =&gt; {
                      this.messages = response.data.data
                  });
  
              const app = feathers().configure(socketio(io('http://localhost:3001')));
              app.service('messages').on('created', (message) =&gt; {
                  this.messages.push(message);
              })
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Question</strong>
  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.</p>
  
  <p><strong>Solving</strong></p>
  
  <p>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.</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          idnex.vue
          todo: eagle.js slideshow
          todo: first info
  
          &lt;ul&gt;
              &lt;li v-for="message in listMessages"&gt;
                  {{ message }}
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      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 =&gt; {
                  this.listMessages = page.data;
              });
              serviceMessage.on('created', (serviceMessage) =&gt; {
  
  
                  this.listMessages.push(serviceMessage);
              });
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Important note, I just noticed that in postman you also see the entire record information and not the same information as with the GET</p>
  
  <p>So nearly there. I figured out what to do in my hooks file</p>
  
  <pre><code>exports.after = {
      all: [],
      find: [],
      get: [],
      create: [
          hooks.remove('createdAt'),
          hooks.remove('updatedAt')
      ],
      update: [],
      patch: [],
      remove: []
  };
  </code></pre>
  
  <p>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</p>