Exercise - Route and query parameters

  • 4 minutes

As an engineer for Tailwind Traders, create your APIs to be efficient both for the server and the client by limiting the amount of data that is sent or returned from the API.

Data usually resides in a database or other storage. The size of the data can be enormous. When a user asks for all the data for the products, the response can be thousands or even millions of records. A request like this can cause a massive strain on a database. It also takes a long time to serve and render the response on the client.

To avoid that scenario, it's a good practice to limit the size of the response:

  • Use route parameters to ask for a specific record
  • Use query parameters to specify a subset of records.

This exercise teaches both techniques.

Open project in development container

  1. Start the process to create a new GitHub Codespace on the main branch of the MicrosoftDocs/node-essentials GitHub repository.

    Open this project in GitHub Codespaces

  2. On the Create codespace page, review the codespace configuration settings and then select Create new codespace

    Screenshot of the confirmation screen before creating a new codespace.

  3. Wait for the codespace to start. This startup process can take a few minutes.

  4. Open a new terminal in the codespace.

    Tip

    You can use the main menu to navigate to the Terminal menu option and then select the New Terminal option.

    Screenshot of the codespaces menu option to open a new terminal.

  5. Validate that Node.js is installed in your environment:

    node --version

  6. Close the terminal.

  7. The remaining exercises in this project take place in the context of this development container.

Set up files for project

  1. To inspect the project for this module, open the ./nodejs-http/exercise-express-routing/parameters folder in the code editor.

    The parameters directory should contain these files:

    File Purpose
    app.js This file contains the Express application.
    package.json This file contains the dependencies for the project.
    package-lock.json This file contains the exact versions of the dependencies.

  2. Right-click on the folder name in the file explorer, /nodejs-http/exercise-express-routing/parameters and select Open in integrated terminal.

  3. In the terminal, run the following command to install the project's dependencies:

    npm install

  4. Open app.js to inspect it. The file should look like this:

    const express = require('express')
const app = express()
const port = 3000

const products = [
{
  id: 1,
  name: "Ivanhoe",
  author: "Sir Walter Scott",
},
{
  id: 2,
  name: "Colour Magic",
  author: "Terry Pratchett",
},
{
  id: 3,
  name: "The Bluest eye",
  author: "Toni Morrison",
},
];

app.get('/', (req, res) => res.send('Hello API!'));

app.get("/products/:id", (req, res) => {});

app.get('/products', (req, res) => {});

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`));

    This JavaScript code creates a basic Express.js server. It defines an array of products and sets up three routes: root (/), /products/:id, and /products. The server listens on port 3000. The routes /products/:id and /products are placeholders with no functionality yet.

    The data is hardcoded to simplify the exercise. In a real-world scenario, the data would come from a database or other storage.

Implement product route to return a single product

The code contains an Express application. The next step is to implement two routes:

  • /products/:id: This route should return a single product.
  • /products: This route should return all products, or as many products that query parameters ask for.

  1. To implement the route /products/:id, locate the following code in the app.js file in the parameters directory:

    app.get("/products/:id", (req, res) => {});

    Replace it with this code:

    app.get("/products/:id", (req, res) => {
  res.json(products.find(p => p.id === +req.params.id));
});

  2. In the terminal, run the following command to run the app:

    node app.js

  3. When the Visual Studio Code pops up the notification of opening the browser, select Open in browser.

  4. Add the following to the end of the URL:

    /products/1

    The output is:

    {
  "id": 1,
  "name": "Ivanhoe",
  "author": "Sir Walter Scott"
}

    Congratulations! You implemented the route correctly. The app uses the route parameter id to find a specific product.

  5. In the terminal, select Ctrl+C to stop the application.

Implement products route to return a list of products

  1. To implement the route /products, locate the following code:

    app.get("/products", (req, res) => {});

    Replace it with this code:

    app.get("/products", (req, res) => {
  const page = +req.query.page;
  const pageSize = +req.query.pageSize;

  if (page && pageSize) {
    const start = (page - 1) * pageSize;
    const end = start + pageSize;
    res.json(products.slice(start, end));
  } else {
    res.json(products);
  }
});

  2. In the terminal, run the following command to start the app and test the code:

    node app.js

  3. When the Visual Studio Code pops up the notification of opening the browser, select Open in browser.

  4. Add the following to the end of the URL:

    /products?page=1&pageSize=2

    The output is:

    [{
  "id": 1,
  "name": "Ivanhoe",
  "author": "Sir Walter Scott"
},
{
  "id": 2,
  "name": "Colour Magic",
  "author": "Terry Pratchett"
}]

    The response shows the first two of three records. This response means that the query parameters, page and pageSize, filtered down the response size from the complete list to two items.

  5. Change the URL to use the following route, products?page=2&pageSize=2 to change the number of pages from one to two. The response is:

    [{
  "id": 3,
  "name": "The Bluest eye",
  "author": "Toni Morrison"
}]

Because the code contains only three records, the second page should contain only one record.

  1. In the terminal, select Ctrl+C to stop the application.

You've now successfully applied query parameters to limit the response.