Introducing DEV.TO Gridsome Source Plugin 
Tags: gridsome, api, showdev, webdev
Published: 2019-07-02 21:00:43

<a href="https://www.npmjs.com/package/@perlatsp/gridsome-source-devto"><img src="https://img.shields.io/badge/gridsome--source--devto-0.0.1-brightgreen.svg"></a>

I just created a plugin for Gridsome, a source plugin to retrieve posts from using dev.to API.
You are able to find the plugin on the NPM registry [here](https://www.npmjs.com/package/@perlatsp/gridsome-source-devto)

## What is Gridsome?

![dev.to settins](https://kociaj.com/content/uploads/2019/07/gridsome.gif)

Ok, hold on a second! What is Gridsome? 

Glad you asked!

Gridsome is a static site generator similar to Gatsby (though still new so not as feature-rich) for the [Vue](https://vuejs.org/) framework. Gridsome makes it easy for developers to build modern JAMstack websites & PWAs that are fast by default. 

##  Why Gridsome?

If you are going to use gridsome you have following by default: 

> - **Local development with hot-reloading** - See code changes in real-time.
> - **Data source plugins** - Connect to any popular Headless CMSs, APIs or Markdown-files.
> - **File-based page routing** - Quickly create and manage routes with files.
> - **Centralized data management** - Pull data into a local, unified GraphQL data layer.
> - **Vue.js for frontend** - A lightweight and approachable front-end framework.
> - **Auto-optimized code** - Get code-splitting and asset optimization out-of-the-box.
> - **Static files generation** - Deploy securely to any CDN or static web host.



For more in-depth information about Gridsome please read the [docs](https://gridsome.org/docs).

## How to use this plugin? 

### Installation

To install this plugin you just need to add it as a dependency on your gridsome project. You can do it by running the following command on your terminal using `yarn`.

```bash
yarn add @perlatsp/gridsome-source-devto
```

or if you prefer `npm`

```bash
npm install @perlatsp/gridsome-source-devto
```

When the installation finishes you should be ready for the next step, which is configuring the plugin.

### Configuration

Before we continue configuring the plugin, what we need to do first is getting an API key from https://dev.to. To do so, we need to go to dev.to website, go to [account->settings](https://dev.to/settings/account) and then you should see an input box, add a description for the token and smash that `Generate Token` button. After doing so, this might take a while for the token to be generated for you (circa `200ms` depending on your internet connection 🤪). 

![dev.to settins](https://kociaj.com/content/uploads/2019/07/devtoapi.png)

#### Configurration file

When you get your token we can proceed to the next step. Adding the configuration to the `gridsome.config.js` file. This file is where most of the gridsome configurations live. Open the configuration file and add the following to the `plugins` array. Like the following

```javascript
...other gridsome plugins
   {
      use: '@perlatsp/gridsome-source-devto',
      options: {
        typeName: 'Article',
        username:'DEVTO_USERNAME',
        apiKey: process.env.DEVTO_API_KEY,
        route: '/:slug',
      }
    }
... rest of config file
```

What we did here is to tell gridsome to use our plugin ` use: '@perlatsp/gridsome-source-devto'` with an `options` object. The options object is pretty straight forward, we are assigning a `typeName: 'Article'`, this is the name of our 'post model' we will use this later to query the posts.

We have `username:'DEVTO_USERNAME'` which is the author's username we want to retrieve from the API.

#### ENV File

API key variable, `apiKey: process.env.DEVTO_API_KEY` which is getting the value from the `.env` file for security reasons so don't have this in our codebase. We need to create a `.env` file in our project root directory and add the following `DEVTO_API_KEY=THE_API_KEY_FROM_DEVTO_SITE`. And the last configuration we need to do is the route. this will be the single post's URL display type. More about gridsome routing [here](https://gridsome.org/docs/routing/#routing).

Now we are ready to roll to the next step displaying the posts.

### Display Posts

To display the posts we need to head over to the `Index.vue` file and modify the <page-query> component (if the component does not exist, create one) to reflect the following:

```html
<page-query>
query Home {
    allArticle {
      edges {
        node {
          id
          title
          published_at
          path
          description
          tag_list
          canonical_url
          cover_image
        }
      }
    }
  }
</page-query>
```

This is a GraphQL query.

>  GraphQL is a declarative query language especially useful for retrieving only the data you ask for. Which again will result in smaller bundles.

We are registering entities named `allArticle` (**all** + the **typeName** we registered in our config file).

There is no need to get all the data from our articles, so we are requesting some of the nodes (fields)  like id, title, description, etc.

Ok, we have our loop query. now what? Is that it? 

Of course not! Now we need somehow to display the date we have. to do so, scroll up to the `<template> component. and modify it to reflect the following : 

```html
  <template>
    <Layout>
      <h1> Gridsome source plugin for
        <img src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg" height="30"
          width="30"></h1>
      <div v-for="{ node } in $page.allArticle.edges" :key="node.id">
        <h2> {{node.title}}</h2>
        {{node.description}}
        <div>
          <g-link :to="node.path" class="single-post-link">Read More</g-link>
        </div>
      </div>
    </Layout>
  </template>
```

And *voila*  we can now see our posts! Open your terminal and run `yarn develop` to compile and create a dev server. your project should be available on http://localhost:8080.

If you followed the previous steps you should have something similar to the following picture. Navigation on top, a heading and the loop with the posts displaying the title, description and the link to the post.

![postsindex](https://kociaj.com/content/uploads/2019/07/posts.png)

Personally, I don't like how it is visually. Let us add some styles. 

![postscards](https://kociaj.com/content/uploads/2019/07/postscards.png)

A bit better :smile: with simple cards. We have now finished the project and we can run `yarn build` to generate all the static files and ready to deploy! ⛴



>  This plugin is still in development and more work needs to be done. Such us displaying more data for the single article page. PRs more than welcome on [github](https://github.com/perlatsp/gridsome-source-devto)