Building URL shortener using React, Apollo, and GraphQL — Part IV: Tracking URL clicks

Photo by Carlos Muza (https://unsplash.com/@kmuza)

Table of Contents

• Part I: Setup and displaying short URLs using GraphQL
• Part II: Creating short URLs
• Part III: Creating serverless function for hashing
• Part IV: Short URL stats (number of clicks) (this post)
• Part V: User authentication

Welcome back! If you want to start following along with this post, you can check out the GitHub repo for the project code, or start from the first part.

With the way project is currently, we can list and create short URLs, but we can’t do anything with those short links yet. In this post we will set up routes to handle short links as well as start tracking the number of clicks and updating the link list to show number of clicks in real time. Let’s get started!

Routing

The routing library we are going to use is React Router (if you want to learn more in-depth about routing and react router, check this great (free) training).

Let’s start with installing the react router dependency first:

$ yarn add react-router-dom