How to add a trending section to your gatsby blog

// gatsby-node.js
// google auth logic
const crypto = require("crypto");
const { google } = require("googleapis");

require("dotenv").config();

exports.sourceNodes = async ({ actions }) => {
  const { createNode } = actions;

  // google auth logic
  const scopes = "https://www.googleapis.com/auth/analytics.readonly";
  const jwt = new google.auth.JWT(
    process.env.CLIENT_EMAIL,
    null,
    process.env.PRIVATE_KEY,
    scopes
  );
  await jwt.authorize();

  const analyticsReporting = google.analyticsreporting({
    version: "v4",
    auth: jwt,
  });

  // Analytics Reporting v4 query
  const result = await analyticsReporting.reports.batchGet({
    requestBody: {
      reportRequests: [
        {
          viewId: process.env.VIEWID,
          dateRanges: [
            {
              startDate: "30DaysAgo",
              endDate: "today",
            },
          ],
          metrics: [
            {
              expression: "ga:pageviews",
            },
          ],
          dimensions: [
            {
              name: "ga:pagePath",
            },
          ],
          orderBys: [
            {
              sortOrder: "DESCENDING",
              fieldName: "ga:pageviews",
            },
          ],
        },
      ],
    },
  });

  // Add analytics data to graphql
  const { rows } = result.data.reports[0].data;
  for (const { dimensions, metrics } of rows) {
    const path = dimensions[0];
    const totalCount = metrics[0].values[0];
    createNode({
      path,
      totalCount: Number(totalCount),
      id: path,
      internal: {
        type: `PageViews`,
        contentDigest: crypto
          .createHash(`md5`)
          .update(JSON.stringify({ path, totalCount }))
          .digest(`hex`),
        mediaType: `text/plain`,
        description: `Page views per path`,
      },
    });
  }
};

// src/pages/popular.tsx

import React from "react";
import { Link, graphql } from "gatsby";

import { ArticleCard } from "../components/styled";

interface IProps {
  data: {
    allMarkdownRemark: {
      edges: Array<{
        node: {
          excerpt: string;
          fields: {
            slug: string;
          };
          frontmatter: {
            date: string;
            title: string;
            description: string;
          };
        };
      }>;
    };
    allPageViews: {
      nodes: Array<{ id: string; totalCount: number }>;
    };
  };
}

const PopularPosts: React.FC<IProps> = ({ data }) => {
  const pageViews = data.allPageViews.nodes;

  // add the pageview data to the post objects
  const posts = data.allMarkdownRemark.edges.map(post => {
    const { slug } = post.node.fields
    const currentPageViews = pageViews.find(
      filteredPageViews => filteredPageViews.id === slug
    )?.totalCount;
    return {
      ...post,
      pageViews: currentPageViews || 0,
    };
  });

  return (
    <div>
      <h1>Most popular Articles</h1>
      {posts
        .sort((postA, postB) => postB.pageViews - postA.pageViews)
        .map(({ node }) => {
          const title = node.frontmatter.title || node.fields.slug;
          return (
            <ArticleCard key={node.fields.slug}>
              <small>{node.frontmatter.date}</small>
              <h3>
                <Link to={node.fields.slug}>{title}</Link>
              </h3>
              <p
                dangerouslySetInnerHTML={{
                  __html: node.frontmatter.description || node.excerpt,
                }}
              />
            </ArticleCard>
          );
        })}
    </div>
  );
};

export default PopularPosts;

export const pageQuery = graphql`
  query {
    allMarkdownRemark(sort: {
      fields: [frontmatter___date],
      order: DESC
    }) {
      edges {
        node {
          excerpt
          fields {
            slug
          }
          frontmatter {
            date(formatString: "MMMM DD, YYYY")
            title
            description
          }
        }
      }
    }
    allPageViews(sort: { order: DESC, fields: totalCount }) {
      nodes {
        id
        totalCount
      }
    }
  }
`;