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.


The GitHub GraphQL API is very well documented, and even though the focus of this tutorial isn’t learning and using GraphQL, it’s a great opportunity to fetch Carbon-related data for this Carbon tutorial.

To do so, we’ll be using Apollo Client, the front-end component of the Apollo Platform. Apollo provides several open source tools for using GraphQL throughout your application’s stack. Apollo Client is a sophisticated GraphQL client that manages data and state in an application.

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

Fork, clone and branch

This tutorial has an accompanying GitHub repository called carbon-tutorial-vue 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 2 instructions.


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 vue-step-3 upstream/vue-step-3

Build and start app

Install the app’s dependencies:


Then, start the app:

yarn serve

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 shortcut this using the Vue CLI, if you’d like more information head over to Vue Apollo Installation for details.

Install the following

  • apollo-boost - package containing everything you need to set up Apollo Client
  • graphql - parses your GraphQL queries
  • vue-apollo - Apollo integration for Vue

Using the command:

vue add apollo

At the following prompts answer ‘No’ to each of the questions.

  • Add example code? No
  • Add a GraphQL API Server? No
  • Configure Apollo Engine? No

Create access token

You’ll need a personal access token from your GitHub account in order to make requests to the GitHub API. Check out this guide to see how to get one.

When you get to the scope/permissions step, you can leave them all unchecked. We don’t need any special permissions, we just need access to the public API.

Once you have your token, we need to put it in a place where create-vue-app can use it. When your application is being built and developed, create-vue-app will parse environmental variables in any file that starts with .env and make them available under process.env.MY_VARIABLE.

One caveat is that we need to start our variables with VUE_APP_. You can read more about environmental variables in create-vue-app’s guide.

Since we don’t want to commit this file to Git, we can put it in .env.local which is in our .gitignore list. Your file should just have a single line like this one, where the xs are replaced with your unique token.


Go ahead and start your app with yarn serve, or, if your app is running, you’ll need to restart it to get access to this token.

Connect to Apollo

The vue-apollo plugin has made a number of changes to our project.

If you open src/main.js you will see that the CLI has updated this file with the following:.

import { createProvider } from 'vue-apollo';
new Vue({
apolloProvider: createProvider(),
render: (h) => h(App),

This is loading from a file the CLI created for you src/vue-apollo.js which we need to update to target the github api.

Update the following values:

// Use our access token
// Target github api
const httpEndpoint =
process.env.VUE_APP_GRAPHQL_HTTP || '';

Update only the wsEndpoint and getAuth properties of the defaultOptions object:

const defaultOptions = {
// set wsEndpoint to null
wsEndpoint: process.env.VUE_APP_GRAPHQL_WS,
// Use the form expected by github for authorisation
getAuth: (tokenName) => `Bearer ${tokenName}`,

Fetch data


Add the following imports to the top of the script section of RepoPage.vue:

import gql from 'graphql-tag';


Next we’ll assemble our GraphQL query to fetch only the data we need from the GraphQL API. We’ll do this using the gql helper we just imported. The gql helper lets you write GraphQL queries using interpolated strings (backticks) in JavaScript. In addition, we’ll be using the Query component from vue-apollo which gives us some great information about our query’s loading state in addition to the data.

You can use GitHub’s explorer tool to write and test your own queries. Try copying the query below and experiment with changing the properties. You can also click the “Docs” button in the top right of the explorer to view all of the available data and query parameters.

If you’d like some more information regarding writing queries and using the Query component, we recommend Apollo’s documentation on this topic.

Add this after your imports:

const REPO_QUERY = gql`
query REPO_QUERY {
# Let's use carbon as our organization
organization(login: "carbon-design-system") {
# We'll grab all the repositories in one go. To load more resources
# continuously, see the advanced topics.
repositories(first: 75, orderBy: { field: UPDATED_AT, direction: DESC }) {
nodes {

Next, we need to configure apollo in our component script, adding the following after the data() declaration.

apollo: {
organization: REPO_QUERY

At this point, we should run our query view the raw the results to verify that the request is working.

In RepoPage.vue add the following before the RepoTable tag.

{{ this.organization }}

When the data loads you should see the response rendered on your repository page. If not, check the console to see if there are any errors and fix.

Revert this last change and continue.

This data is not quite in the format our RepoTable component is expecting so we’ll use a computed property to transform it. Computed properties in Vue cache and watch their reactive dependencies for us.

Remove the ‘rows’ constant and its use in the data declaration, and add this computed property.

computed: {
rows() {
if (!this.organization) {
return [];
} else {
return => ({
stars: row.stargazers.totalCount,

At this point you have a working table but the links column clearly isn’t what we want.

Helper component

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

Add the following to create your component:

A template section:

<ul class="link-list">
<cv-link :href="url">GitHub</cv-link>
<li v-if="homepageUrl">
<cv-link :href="homepageUrl">Homepage</cv-link>

A script section:

export default