Building Your Dashboard With Helium

In this tutorial, we'll walk through creating a custom dashboard experience powered by Helium. We'll identify which GraphQL calls to use, then build out the frontend components.

Part 1: API Calls

CurrentUser Query

Fetch the user's name, courses, and panorama:

query {
  CurrentUser {
    firstName
    lastName
    client {
      name
    }
  }
}

UserContentItems Query

query {
  UserContentItems {
    title
    id
  }
}

UserCertificates Query

UserCertificates {
  source
  certificateTemplate {
    title
  }
}

Part 2: Building the Frontend

Custom Welcome Message

import React from 'react';
import { gql, useQuery } from '@apollo/client';

function Dashboard() {
  const dashboard_query = gql`
    query DashboardQuery {
      CurrentUser {
        firstName
        client { name }
      }
    }
  `;

  const { data, error } = useQuery(dashboard_query);

  if (data) {
    console.log(data);
  }

  return (
    <div>
      <h1>I'm a custom dashboard page!</h1>
    </div>
  );
}

export { Dashboard };

Adding Dashboard Stats

Install the component:

npm i @thoughtindustries/dashboard-stats

Add it to your dashboard:

import { DashboardStats } from '@thoughtindustries/dashboard-stats';

return (
  <div>
    {header}
    <DashboardStats />
  </div>
);

Adding Certificates

Add UserCertificates to your query and render the data:

let certificates;
if (data) {
  certificates = data.UserCertificates.map((cert, i) => (
    <div key={i}>
      <h1>{cert.certificateTemplate.title}</h1>
      <img src={cert.source} />
    </div>
  ));
}

return (
  <div>
    {header}
    <DashboardStats />
    {certificates}
  </div>
);