Vue step 3

.env

@@ -1 +1,2 @@
 SASS_PATH="node_modules"
+VUE_APP_GITHUB_PERSONAL_ACCESS_TOKEN=ghp_l6HSDuOHMiBzb6odsqZAa

apollo.config.js

@@ -0,0 +1,26 @@
+const path = require('path');
+
+// Load .env files
+const { loadEnv } = require('vue-cli-plugin-apollo/utils/load-env');
+const env = loadEnv([
+  path.resolve(__dirname, '.env'),
+  path.resolve(__dirname, '.env.local')
+]);
+
+module.exports = {
+  client: {
+    service: env.VUE_APP_APOLLO_ENGINE_SERVICE,
+    includes: ['src/**/*.{js,jsx,ts,tsx,vue,gql}']
+  },
+  service: {
+    name: env.VUE_APP_APOLLO_ENGINE_SERVICE,
+    localSchemaFile: path.resolve(
+      __dirname,
+      './node_modules/.temp/graphql/schema.json'
+    )
+  },
+  engine: {
+    endpoint: process.env.APOLLO_ENGINE_API_ENDPOINT,
+    apiKey: env.VUE_APP_APOLLO_ENGINE_KEY
+  }
+};

package.json

@@ -5,10 +5,10 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "ci-check": "yarn format:diff",
-    "format:diff": "prettier --list-different \"src/**/*.{js,vue,scss}\"",
+    "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
-    "test:unit": "vue-cli-service test:unit"
+    "ci-check": "yarn format:diff",
+    "format:diff": "prettier --list-different \"src/**/*.{js,vue,scss}\""
   },
   "dependencies": {
     "@carbon/icons-vue": "^10.30.0",
@@ -17,6 +17,7 @@
     "core-js": "^3.11.0",
     "mock-apollo-client": "^1.1.0",
     "vue": "^2.6.12",
+    "vue-apollo": "^3.0.0-beta.11",
     "vue-router": "^3.5.1"
   },
   "devDependencies": {
@@ -31,13 +32,12 @@
     "eslint": "^7.25.0",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-vue": "^7.9.0",
+    "graphql-tag": "^2.9.0",
     "sass": "^1.32.11",
     "sass-loader": "^10.1.1",
+    "vue-cli-plugin-apollo": "~0.22.2",
     "vue-template-compiler": "^2.6.12"
   },
-  "prettier": {
-    "singleQuote": true
-  },
   "eslintConfig": {
     "root": true,
     "env": {
@@ -52,6 +52,9 @@
       "parser": "babel-eslint"
     }
   },
+  "prettier": {
+    "singleQuote": true
+  },
   "postcss": {
     "plugins": {
       "autoprefixer": {}
@@ -68,8 +71,10 @@
       "json",
       "vue"
     ],
-   "setupFiles": ["./tests/setup.js"],
-   "transform": {
+    "setupFiles": [
+      "./tests/setup.js"
+    ],
+    "transform": {
       "^.+\\.vue$": "vue-jest",
       ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
       "^.+\\.jsx?$": "babel-jest"

src/main.js

@@ -3,11 +3,13 @@ import App from './App.vue';
 import router from './router';
 
 import CarbonComponentsVue from '@carbon/vue';
+import { createProvider } from './vue-apollo';
 Vue.use(CarbonComponentsVue);
 
 Vue.config.productionTip = false;
 
 new Vue({
   router,
+  apolloProvider: createProvider(),
   render: h => h(App)
 }).$mount('#app');

src/views/RepoPage/LinkList.vue

@@ -0,0 +1,28 @@
+<style>
+.link-list {
+  display: flex;
+}
+</style>
+
+<template>
+  <ul class="link-list">
+    <li>
+      <cv-link :href="url">GitHub</cv-link>
+    </li>
+
+    <li v-if="homepageUrl">
+      <span>&nbsp;|&nbsp;</span>
+      <cv-link :href="homepageUrl">Homepage</cv-link>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: 'LinkList',
+  props: {
+    url: String,
+    homepageUrl: String
+  }
+};
+</script>

src/views/RepoPage/RepoPage.vue

@@ -4,9 +4,12 @@
       <div class="bx--col-lg-16">
         <repo-table
           :headers="headers"
-          :rows="rows"
+          :rows="pagedRows"
+          :totalRows="rows.length"
+          @pagination="onPagination"
           title="Carbon Repositories"
           helperText="A collection of public Carbon repositories."
+          :loading="$apollo.loading"
         />
       </div>
     </div>
@@ -15,7 +18,40 @@
 
 <script>
 import RepoTable from './RepoTable';
-
+import gql from 'graphql-tag';
+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 }) {
+        totalCount
+        nodes {
+          url
+          homepageUrl
+          issues(filterBy: { states: OPEN }) {
+            totalCount
+          }
+          stargazers {
+            totalCount
+          }
+          releases(first: 1) {
+            totalCount
+            nodes {
+              name
+            }
+          }
+          name
+          updatedAt
+          createdAt
+          description
+          id
+        }
+      }
+    }
+  }
+`;
 const headers = [
   {
     key: 'name',
@@ -42,45 +78,46 @@ const headers = [
     header: 'Links'
   }
 ];
-
-const rows = [
-  {
-    id: '1',
-    name: 'Repo 1',
-    createdAt: 'Date',
-    updatedAt: 'Date',
-    issueCount: '123',
-    stars: '456',
-    links: 'Links'
-  },
-  {
-    id: '2',
-    name: 'Repo 2',
-    createdAt: 'Date',
-    updatedAt: 'Date',
-    issueCount: '123',
-    stars: '456',
-    links: 'Links'
-  },
-  {
-    id: '3',
-    name: 'Repo 3',
-    createdAt: 'Date',
-    updatedAt: 'Date',
-    issueCount: '123',
-    stars: '456',
-    links: 'Links'
-  }
-];
-
 export default {
   name: 'RepoPage',
   components: { RepoTable },
   data() {
     return {
       headers,
-      rows
+      pageSize: 0,
+      pageStart: 0,
+      page: 0
     };
+  },
+  computed: {
+    rows() {
+      if (!this.organization) {
+        return [];
+      } else {
+        return this.organization.repositories.nodes.map(row => ({
+          ...row,
+          key: row.id,
+          stars: row.stargazers.totalCount,
+          issueCount: row.issues.totalCount,
+          createdAt: new Date(row.createdAt).toLocaleDateString(),
+          updatedAt: new Date(row.updatedAt).toLocaleDateString(),
+          links: { url: row.url, homepageUrl: row.homepageUrl }
+        }));
+      }
+    },
+    pagedRows() {
+      return this.rows.slice(this.pageStart, this.pageStart + this.pageSize);
+    }
+  },
+  methods: {
+    onPagination(val) {
+      this.pageSize = val.length;
+      this.pageStart = val.start;
+      this.page = val.page;
+    }
+  },
+  apollo: {
+    organization: REPO_QUERY
   }
 };
 </script>

src/views/RepoPage/RepoTable.vue

@@ -1,26 +1,47 @@
 <template>
-  <cv-data-table :columns="columns" :title="title" :helper-text="helperText">
+  <cv-data-table-skeleton
+    v-if="loading"
+    :columns="columns"
+    :title="title"
+    :helper-text="helperText"
+    :rows="10"
+  />
+  <cv-data-table
+    v-else
+    :columns="columns"
+    :title="title"
+    :helper-text="helperText"
+    :pagination="{ numberOfItems: this.totalRows }"
+    @pagination="$emit('pagination', $event)"
+  >
     <template v-slot:data>
       <cv-data-table-row v-for="(row, rowIndex) in data" :key="`${rowIndex}`">
         <cv-data-table-cell
           v-for="(cell, cellIndex) in row.data"
           :key="`${cellIndex}`"
-          >{{ cell }}</cv-data-table-cell
         >
+          <template v-if="!cell.url">
+            {{ cell }}
+          </template>
+          <link-list v-else :url="cell.url" :homepage-url="cell.homepageUrl" />
+        </cv-data-table-cell>
         <template v-slot:expandedContent> {{ row.description }} xx </template>
       </cv-data-table-row>
     </template>
   </cv-data-table>
 </template>
 
 <script>
+import LinkList from './LinkList';
 export default {
   name: 'RepoTable',
+  components: { LinkList },
   props: {
     headers: Array,
     rows: Array,
     title: String,
-    helperText: String
+    helperText: String,
+    totalRows: Number
   },
   computed: {
     columns() {
@@ -36,7 +57,7 @@ export default {
           row.stars,
           row.links
         ],
-        description: 'Row description'
+        description: row.description
       }));
     }
   }