Source Usage Data for Social Proof on Your Gatsby Site

Copygatsby-node.js: copy code to clipboard
exports.sourceNodes = async (gatsbyUtils) => {
  const { reporter, actions, createNodeId, createContentDigest } = gatsbyUtils;
  const { createNode } = actions;

  const result = await xata.db.accounts.aggregate({
    // 1️⃣ Get the number of users from Xata
    unfollowsTotal: {
      count: {
        filter: {
          // Unfollowed is greater than PYF launch data
          unfollowed: { $ge: new Date("2022-11-03") },
        },
      },
    },
    // 2️⃣ Get the number of unfollows from Xata
    usersTotal: {
      uniqueCount: {
        //number of account rows where followed_by is unique
        column: "followed_by",
      },
    },
  });

  const usageData = {
    unfollowedCount: result.aggs.unfollowsTotal,
    userCount: result.aggs.usersTotal,
  };

  // 3️⃣ Create one Gatsby `UsageData` Node with the numbers
  createNode({
    id: createNodeId("UsageData"),
    ...statsData,
    internal: {
      type: "UsageData",
      contentDigest: createContentDigest(usageData),
    },
  });
};

Copycomponents/usage-data.js: copy code to clipboard
import React from "react";
import { useStaticQuery, graphql } from "gatsby";

export function UsageData() {
  // 1️⃣ Query the usage numbers from the Gatsby Data Layer
  const data = useStaticQuery(graphql`
    query {
      usageData {
        unfollowedCount
        userCount
      }
    }
  `);

  // 2️⃣ Display the data with the design of your choosing
  return (
    <section>
      <dl>
        <dt>Users</dt>
        <dd>{data.usageData.userCount}</dd>

        <dt>Unfollows</dt>
        <dd>{data.usageData.unfollowedCount}</dd>
      </dl>
    </section>
  );
}