Skip to main contentCarbon Design System

3. Using APIs

This step takes our static components and populates them with data from the GitHub GraphQL API – loading states and all. We’ll be displaying Carbon repository information in a data table.

Preview

The Github REST API is very well documented, we’ll use it to fetch Carbon-related data for this Carbon tutorial.

To do so, we’ll be using Octokit Core, a client that makes it easy to interact with Github’s APIs.

A preview of what you will build (see repositories page):

Fork, clone and branch

This tutorial has an accompanying GitHub repository called carbon-tutorial that we’ll use as a starting point for each step. If you haven’t forked and cloned that repository yet, and haven’t added the upstream remote, go ahead and do so by following the step 1 instructions.

Branch

With your repository all set up, let’s check out the branch for this tutorial step’s starting point.

git fetch upstream
git checkout -b v11-react-step-3 upstream/v11-react-step-3

Build and start app

Install the app’s dependencies:

yarn

Then, start the app:

yarn start

You should see something similar to where the previous step left off. Stop your app with CTRL-C and let’s get everything installed.

Install dependencies

We’ll need to install @octokit/core, a package that allows us to query Github APIs easily. Stop your development server with CTRL-C and install the octokit dependency with:

yarn add @octokit/[email protected]

Then, start the app again. If your app’s currently running, you’ll need to restart it.

yarn start

Fetch data

Imports

We’ll be using React Hooks to call a function to fetch our data when the component renders.

Import React’s useEffect by modifying the React import in RepoPage.js.

src/content/RepoPage/RepoPage.js
import React, { useEffect } from 'react';

Add the following import below the react import in RepoPage.js:

src/content/RepoPage/RepoPage.js
import { Octokit } from '@octokit/core';

Initializing Octokit client

Directly below all your imports, initialize an octokit client which we’ll use to query our RepoTable data:

src/content/RepoPage/RepoPage.js
const octokitClient = new Octokit({});

API Request

Next, we’ll assemble our Github API request to fetch a list of repositories that belong to the carbon-design-system Github organization. We’ll do this by using a useEffect hook that will use octokit to query Github’s API repositories endpoint.

Let’s declare a useEffect hook immediately below the component definition. We’ll use this to query Github’s API when the component first renders:

src/content/RepoPage/RepoPage.js
const RepoPage = () => {
  useEffect(() => {
    async function getCarbonRepos() {
      const res = await octokitClient.request('GET /orgs/{org}/repos', {
        org: 'carbon-design-system',
        per_page: 75,
        sort: 'updated',
        direction: 'desc',
      });

At this point, if you navigate to the Repositories page in your running app and view your browser’s console (e.g. Chrome DevTools), you should see the response from GitHub!

Helpers

Our last column in the data table will be a comma-separated list of repository and home page links, so let’s create a component called LinkList.

Import Link at the top of RepoPage.js. The imports should look like this.

src/content/RepoPage/RepoPage.js