DEV Community

loading...

How to integrate dev API to your portfolio website

Chrissie
Frontend web developer - Software Engineering student
Updated on ・2 min read

A few days ago, while working on my portfolio I decided to have a page that would showcase posts that I made on this site. It took me a whole day trying to get it working, as I was new to using API and how to integrate them to a website, it was quite a challenge for me.

Here's how I made it work. I'm using gridsome, a static site generator for Vue to build my website. Also, keep in mind that the API is still in the beta stage.

First, install axios into your project file

yarn add axios or npm i axios
Enter fullscreen mode Exit fullscreen mode

In the gridsome.server.js file, we'll declare a variable called axios

const axios = require('axios')
Enter fullscreen mode Exit fullscreen mode

In the same file, we'll then configure the datastore API that lets us insert data into the graphql data layer.

module.exports = function(api) {
  api.loadSource(async (actions) => {
    const collection = actions.addCollection("Post");

    const { data } = await axios.get(
      "https://dev.to/api/articles?username=chrissiemhrk"
    );
    }
  });
};
Enter fullscreen mode Exit fullscreen mode

To get your API link go to https://docs.dev.to/api/#operation/getArticles

Alt Text

Copy the link highlighted in red and change the name at the end from ben to your dev username.

Alt Text

This section is where you'll see the content you can showcase. Personally, I chose the ID, title, description, and canonical_url.

module.exports = function(api) {
  api.loadSource(async (actions) => {
    const collection = actions.addCollection("Post");

    const { data } = await axios.get(
      "https://dev.to/api/articles?username=chrissiemhrk"
    );

    for (const item of data) {
      collection.addNode({
        id: item.id,
        title: item.title,
        description: item.description,
        canonical_url: item.canonical_url,
      });
    }
  });
};
Enter fullscreen mode Exit fullscreen mode

Once done, go to the page you want your blog posts to appear and write this code in the file. This will enable us to query the data in our vue component. The content in the node will change depending on what you chose in the gridsome.server.js file

<page-query>
query {
  allPost {
    edges {
      node {
        id
        title
        description
        canonical_url
      }
    }
  }
}
</page-query>
Enter fullscreen mode Exit fullscreen mode

At the beginning of the page, you'll add in code similar to this one below that will structure your posts the way you want.

<template>
  <layout>
    <article
      v-for="edge in $page.allPost.edges"
      :key="edge.node.id"
    >
      <h1>{{ edge.node.title }}</h1>
      <p>{{ edge.node.description }}</p>
      <g-link :to="edge.node.canonical_url">Read more</g-link>
    </article>
  </layout>
</template>
Enter fullscreen mode Exit fullscreen mode

 

That's it the only thing left is to customize/style your page.

Discussion (0)