Fetching a single article

Summary

Now that we can display a list of articles on the homepage and the articles page, let's add a dedicated page to show the full content of an article, including its title and body.

To do this, we first modify our routes configuration to handle individual article pages. We define a new GET route with a dynamic :id parameter that captures the article's ID from the URL. In Sails, these variables are called route parameters and are passed as inputs to our actions.

Next, we generate a new action, view-article, to handle fetching a single article based on its ID. We define id as an input parameter, specifying that it must be an integer and is required. Using a Waterline query, we retrieve the article and pass it to a new EJS view, article.ejs, where we display the article’s title and body.

To enhance navigation, we update our homepage and articles page to include links to individual article pages. Now, users can simply click on an article title to view its full content.

Transcript

Now that we can see all articles on our homepage and articles page, let’s add another page to display an article’s full content, including the title and body.

To achieve this, we first update our routes configuration. We add a new entry in config/routes.js:

'GET /articles/:id': 'articles/view-article'

The :id part is a route parameter, meaning whatever value appears in that position of the URL will be passed to our action as an input. For example:

localhost:1337/articles/1

Here, 1 is the article’s ID, which we can use to fetch the corresponding article from the database.

Next, we generate a new action:

sails generate action article/view-article

Sails automatically creates the action inside api/controllers/articles/view-article.js. Now, let’s define the required inputs for this action.

Inside view-article.js, before the exits section, we add:

inputs: {
  id: {
    type: 'number',
    required: true,
  },
},

This ensures that every request includes a valid id, and Sails will reject any request that doesn’t meet this requirement.

Now, in the action’s main function, we use Waterline to fetch the article:

const { id } = inputs;
const article = await Article.findOne({ id });
return { article };

This retrieves the article with the given ID and passes it as a local to our view.

Next, we create a new view file: views/pages/articles/article.ejs. Inside, we display the article’s title and body using EJS syntax:

<h1><%= article.title %></h1>
<p><%= article.body %></p>

To test this, we restart our Sails server:

sails lift

Then, in Firefox, we visit localhost:1337/articles/1. If an article with ID 1 exists, we see its title and body displayed.

To improve navigation, we update our homepage and articles page to include links to individual articles:

Update views/pages/home.ejs

<ul>
  <% for (let recentArticle of recentArticles) { %>
    <li>
      <a href="/articles/<%= recentArticle.id %>"><%= recentArticle.title %></a>
    </li>
  <% } %>
</ul>

Update views/pages/articles.ejs

<ul>
  <% for (let article of articles) { %>
    <li>
      <a href="/articles/<%= article.id %>"><%= article.title %></a>
    </li>
  <% } %>
</ul>

Now, when users click on an article title, they are taken to the full article view.

In the next lesson, we’ll add a form to create new articles.