Transformers

Fifth Lesson in the Vue-Todo Series

Posted on July 28, 2016 in Laravel PHP Framework, Vue-Todo Series, vue.js

Transformers

So why use transformers? They are an easy way to manage the data being returned to the user. For instance, if you have a boolean stored in your database, you can cast it to a boolean instead of returning 1 or 0. It also allows you to modify your database structure and only have to change the transformer.

User Transformer

Now, we don't need to pull in any further packages as Dingo API comes fully equipped to handle this situation. First, create a new folder called Transformers here: app/Api/Transformers. Now create a new file called UserTransformer.php in the newly created folder. Add the following to the new file:

<?php

namespace Api\Transformers;

use App\User;
use League\Fractal\TransformerAbstract;

class UserTransformer extends TransformerAbstract
{
    public function transform(User $user)
    {
        return [
            'id'        => (int) $user->id,
            'first_name'=> $user->first_name,
            'last_name' => $user->last_name,
            'email'     => $user->email,
            'created'   => $user->created_at,
            'updated'   => $user->updated_at
        ];
    }
}

We now need to tell our AuthController about this new transformer. Open app/Api/Controllers/AuthController.php. Add use Api\Transformers\UserTransformer; to the end of the list. Now within the public function authenticatedUser(Request $request) function modify to the following:

public function authenticatedUser(Request $request)
{
    return $this->item(JWTAuth::parseToken()->authenticate(), new UserTransformer());
}

So what have we done here? Well, we first created our transformer and passed in our User model. We are then creating our array and setting the values from our User model. You can see that we have cast the id to an int just to make sure that it can only be a number. We have also changed the name of the created_at/updated_at has been renamed to created/updated respectively. This was mainly to show you how you can abstract from your database layer and pass the user fields that are unlikely to change. We then updated the authenticatedUser function within our AuthController to tell it to use the newly created UserTransformer. We can test this now by opening Postman and logging in again to get an updated token and then run a GET request to http://vue-todo-series.dev/api/user/details and you should see:

Image of User details

Because we will be working with Vue.js, I would like the dates in the JavaScript ISO-8601 date format. This is very easy to implement for two main reasons.

  1. Laravel 5 already knows about the created_at / updated_at dates and automatically makes these instances of Carbon Date.
  2. This is a php package which makes it super easy to create new date formats and also comes with a lot of pre-built solutions. One of which is the toIso8601String().

Let's first update the transformer. Open app/Api/Transformers/UserTransformer.php and change the created and updated entries as follows:

'created'   => $user->created_at->toIso8601String(),
'updated'   => $user->updated_at->toIso8601String()

If you now send another GET request through Postman to http://vue-todo-series.dev/api/users/details you should now see the correctly formatted dates.

Image of created date details

Brilliant, how easy was that.

Next Time

So we now have our User Transformer and I believe all of the Authentication endpoints we need. So next we will look into creating the resources for implementing our Todo's.


comments powered by Disqus