COVIDiary pt. 6 - Formatting Data

audthecodewitch profile image Audrea Cook Originally published at codewitch.dev on ・3 min read

Welcome to Part 6 of the COVIDiary project! If you’re just joining us or missed a post, here’s what we’ve done so far:

This week, we’re working on the back end. By the end of today, we will:

  • Add some important gems
  • Generate serializers to properly format our data

Are you ready? Let’s do this.

Let’s do this!

Open your CD-API repository.

1. Add Gems

We need to add two more gems to our Gemfile to help the front and back ends communicate properly.

Rack CORS Middleware

The first is Rack CORS Middleware, which will let our fetch requests work. Rack CORS is used so frequently in Rails applications that it’s automatically included in your Gemfile. To use it, simply uncomment the line in your Gemfile.

# Use Rack CORS for handling Cross-Origin Resource Sharing (CORS), making cross-origin AJAX possible
gem 'rack-cors'

We also need to uncomment the following section in config/initializers/cors.rb:

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'example.com'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]

Finally, change example.com to * for now.


The second gem we need to add is Fast JSON API. This will allow us to generate serializers and properly format our data before sending it to the front end. You can read more about serializers here. In your Gemfile, add the following:

gem ‘fast_jsonapi’

That’s it! Now that we’ve added both gems, let’s install them by running bundle install in your terminal. You can also start up your backend server now using rails s.

2. Generate Serializers

We need a serializer for both our Entries and our Users.

Get that cereal!

With Fast JSON API, these are easy to create with the rails g serializer command. Let’s do that now. In your terminal, enter the following:

rails g serializer Entry
rails g serializer User

You will now have a serializers directory in your app directory, and it will contain your two new serializer files. They should look something like this:

class EntrySerializer
  include FastJsonapi::ObjectSerializer

Let’s configure these to present the data the way we want. First, we’ll add our relationships. A user has many entries, so in your UserSerializer class, add:

has_many :entries

We’ll set up the opposite side of the relationship in your EntrySerializer class:

Belongs_to :user

Now that we have the relationships under control, we need to specify which data attributes we want to serialize. In your EntrySerializer class, change the attributes line to look like the following:

attributes :id,

Now do the same with the UserSerializer class:

attributes :id,

Coming Up

We now have serializers to properly format our data for future fetch() requests!! Next week, we’ll create our controller actions so we can finally connect to the front end!


Editor guide