[{"data":1,"prerenderedAt":436},["ShallowReactive",2],{"\u002Fblog\u002Fgridsome-source-plugin-for-dev-to-api":3,"related-\u002Fblog\u002Fgridsome-source-plugin-for-dev-to-api":395},{"id":4,"title":5,"author":6,"body":10,"categories":375,"cta":378,"date":379,"description":380,"excerpt":378,"extension":381,"image":382,"imageAlt":383,"meta":384,"navigation":385,"path":386,"readingTime":387,"seo":388,"stem":390,"tags":391,"__hash__":394},"blog\u002Fblog\u002Fgridsome-source-plugin-for-dev-to-api.md","Gridsome Source Plugin for dev.to API",{"name":7,"avatar":8,"description":9},"Perlat Kociaj","\u002Fimages\u002Fperlat.jpeg","Full Stack Web Developer",{"type":11,"value":12,"toc":364},"minimark",[13,24,29,32,35,49,53,56,103,111,115,120,128,138,144,150,153,157,180,185,196,202,217,224,228,250,253,257,264,270,273,279,294,297,300,303,309,326,329,332,339,349,352],[14,15,16,17],"p",{},"Just created a plugin for Gridsome, a source plugin to retrieve posts from using dev.to API.\nYou are able to find the plugin on the NPM registry ",[18,19,23],"a",{"href":20,"rel":21},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@perlatsp\u002Fgridsome-source-devto",[22],"nofollow","here",[25,26,28],"h2",{"id":27},"what-is-gridsome","What is Gridsome",[14,30,31],{},"Ok, hold on a second! What is Gridsome?",[14,33,34],{},"Glad you asked!",[14,36,37,38,43,44,48],{},"Gridsome is a static site generator similar to Gatsby (though still new so not as feature-rich) for the ",[18,39,42],{"href":40,"rel":41},"https:\u002F\u002Fvuejs.org\u002F",[22],"Vue"," framework. Gridsome makes it easy for developers to build modern ",[18,45,47],{"href":46},"\u002Fservices\u002Fweb-development","JAMstack websites"," & PWAs that are fast by default.",[25,50,52],{"id":51},"why-gridsome","Why Gridsome?",[14,54,55],{},"If you are going to use gridsome you have following by default:",[57,58,59,67,73,79,85,91,97],"ul",{},[60,61,62,66],"li",{},[63,64,65],"strong",{},"Local development with hot-reloading"," – See code changes in real-time.",[60,68,69,72],{},[63,70,71],{},"Data source plugins"," – Connect to any popular Headless CMSs, APIs or Markdown-files.",[60,74,75,78],{},[63,76,77],{},"File-based page routing"," – Quickly create and manage routes with files.",[60,80,81,84],{},[63,82,83],{},"Centralized data management"," – Pull data into a local, unified GraphQL data layer.",[60,86,87,90],{},[63,88,89],{},"Vue.js for frontend"," – A lightweight and approachable front-end framework.",[60,92,93,96],{},[63,94,95],{},"Auto-optimized code"," – Get code-splitting and asset optimization out-of-the-box.",[60,98,99,102],{},[63,100,101],{},"Static files generation"," – Deploy securely to any CDN or static web host.",[14,104,105,106],{},"For more in-depth information about Gridsome please read the ",[18,107,110],{"href":108,"rel":109},"https:\u002F\u002Fgridsome.org\u002Fdocs",[22],"docs",[25,112,114],{"id":113},"how-to-use-this-plugin","How to use this plugin?",[116,117,119],"h3",{"id":118},"installation","Installation",[14,121,122,123,127],{},"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 ",[124,125,126],"code",{},"yarn",".",[129,130,135],"pre",{"className":131,"code":133,"language":134},[132],"language-text","yarn add @perlatsp\u002Fgridsome-source-devto\n","text",[124,136,133],{"__ignoreMap":137},"",[14,139,140,141],{},"or if you prefer ",[124,142,143],{},"npm",[129,145,148],{"className":146,"code":147,"language":134},[132],"npm install @perlatsp\u002Fgridsome-source-devto\n",[124,149,147],{"__ignoreMap":137},[14,151,152],{},"When the installation finishes you should be ready for the next step, which is configuring the plugin.",[116,154,156],{"id":155},"configuration","Configuration",[14,158,159,160,165,166,171,172,175,176,179],{},"Before we continue configuring the plugin, what we need to do first is getting an API key from ",[18,161,164],{"href":162,"rel":163},"https:\u002F\u002Fdev.to\u002F",[22],"https:\u002F\u002Fdev.to",". To do so, we need to go to dev.to website, go to ",[18,167,170],{"href":168,"rel":169},"https:\u002F\u002Fdev.to\u002Fsettings\u002Faccount",[22],"account->settings"," and then you should see an input box, add a description for the token and smash that ",[124,173,174],{},"Generate Token"," button. After doing so, this might take a while for the token to be generated for you (circa ",[124,177,178],{},"200ms"," depending on your internet connection 🤪).",[181,182,184],"h4",{"id":183},"configurration-file","Configurration file",[14,186,187,188,191,192,195],{},"When you get your token we can proceed to the next step. Adding the configuration to the ",[124,189,190],{},"gridsome.config.js"," file. This file is where most of the gridsome configurations live. Open the configuration file and add the following to the ",[124,193,194],{},"plugins"," array. Like the following",[129,197,200],{"className":198,"code":199,"language":134},[132],"...other gridsome plugins\n   {\n      use: '@perlatsp\u002Fgridsome-source-devto',\n      options: {\n        typeName: 'Article',\n        username:'DEVTO_USERNAME',\n        apiKey: process.env.DEVTO_API_KEY,\n        route: '\u002F:slug',\n      }\n    }\n... rest of config file\n",[124,201,199],{"__ignoreMap":137},[14,203,204,205,208,209,212,213,216],{},"What we did here is to tell gridsome to use our plugin ",[124,206,207],{},"use: '@perlatsp\u002Fgridsome-source-devto'"," with an ",[124,210,211],{},"options"," object. The options object is pretty straight forward, we are assigning a ",[124,214,215],{},"typeName: 'Article'",", this is the name of our ‘post model’ we will use this later to query the posts.",[14,218,219,220,223],{},"We have ",[124,221,222],{},"username:'DEVTO_USERNAME'"," which is the author’s username we want to retrieve from the API.",[181,225,227],{"id":226},"env-file","ENV File",[14,229,230,231,234,235,238,239,241,242,245,246,127],{},"API key variable, ",[124,232,233],{},"apiKey: process.env.DEVTO_API_KEY"," which is getting the value from the ",[124,236,237],{},".env"," file for security reasons so don’t have this in our codebase. We need to create a ",[124,240,237],{}," file in our project root directory and add the following ",[124,243,244],{},"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 ",[18,247,23],{"href":248,"rel":249},"https:\u002F\u002Fgridsome.org\u002Fdocs\u002Frouting\u002F#routing",[22],[14,251,252],{},"Now we are ready to roll to the next step displaying the posts.",[116,254,256],{"id":255},"display-posts","Display Posts",[14,258,259,260,263],{},"To display the posts we need to head over to the ",[124,261,262],{},"Index.vue"," file and modify the component (if the component does not exist, create one) to reflect the following:",[129,265,268],{"className":266,"code":267,"language":134},[132],"query Home {\n    allArticle {\n      edges {\n        node {\n          id\n          title\n          published_at\n          path\n          description\n          tag_list\n          canonical_url\n          cover_image\n        }\n      }\n    }\n  }\n",[124,269,267],{"__ignoreMap":137},[14,271,272],{},"This is a GraphQL query.",[274,275,276],"blockquote",{},[14,277,278],{},"GraphQL is a declarative query language especially useful for retrieving only the data you ask for. Which again will result in smaller bundles.",[14,280,281,282,285,286,289,290,293],{},"We are registering entities named ",[124,283,284],{},"allArticle"," (",[63,287,288],{},"all"," + the ",[63,291,292],{},"typeName"," we registered in our config file).",[14,295,296],{},"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.",[14,298,299],{},"Ok, we have our loop query. now what? Is that it?",[14,301,302],{},"Of course not! Now we need somehow to display the date we have. to do so, scroll up to the ` component. and modify it to reflect the following :",[129,304,307],{"className":305,"code":306,"language":134},[132],"Gridsome source plugin for\n            \n        \n        \n             {{node.title}}\n            {{node.description}}\n            \n                Read More\n",[124,308,306],{"__ignoreMap":137},[14,310,311,312,316,317,320,321,127],{},"And ",[313,314,315],"em",{},"voila"," we can now see our posts! Open your terminal and run ",[124,318,319],{},"yarn develop","to compile and create a dev server. your project should be available on ",[18,322,325],{"href":323,"rel":324},"http:\u002F\u002Flocalhost:8080\u002F",[22],"http:\u002F\u002Flocalhost:8080",[14,327,328],{},"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.",[14,330,331],{},"Personally, I don’t like how it is visually. Let us add some styles.",[14,333,334,335,338],{},"A bit better 😄 with simple cards. We have now finished the project and we can run ",[124,336,337],{},"yarn build"," to generate all the static files and ready to deploy! ⛴",[274,340,341],{},[14,342,343,344],{},"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 ",[18,345,348],{"href":346,"rel":347},"https:\u002F\u002Fgithub.com\u002Fperlatsp\u002Fgridsome-source-devto",[22],"github",[350,351],"hr",{},[14,353,354,355,358,359,363],{},"Looking for a Vue.js developer to build your next project? Check out my ",[18,356,357],{"href":46},"web development services"," or get in touch for ",[18,360,362],{"href":361},"\u002Fservices\u002Fwhite-label-development","white-label development"," if you're an agency.",{"title":137,"searchDepth":365,"depth":365,"links":366},2,[367,368,369],{"id":27,"depth":365,"text":28},{"id":51,"depth":365,"text":52},{"id":113,"depth":365,"text":114,"children":370},[371,373,374],{"id":118,"depth":372,"text":119},3,{"id":155,"depth":372,"text":156},{"id":255,"depth":372,"text":256},[376,377],"Article","Uncategorized",null,"2019-07-02","Just created a plugin for Gridsome, a source plugin to retrieve posts from using dev.to API.\nYou are able to find the plugin on the NPM registry here","md","\u002Fimages\u002Fblog\u002Fdevtoapi.png","Gridsome source plugin for dev.to API",{},true,"\u002Fblog\u002Fgridsome-source-plugin-for-dev-to-api",4,{"title":5,"description":389,"ogImage":382},"A plugin for Gridsome to pull your posts from dev.to website, from your profile or a choosen profile.","blog\u002Fgridsome-source-plugin-for-dev-to-api",[392,393],"gridsome","VueJS","xF1TjiN_GNDT2fvCxeVuCsyDS0yWjGkcI435jkmYyAg",[396,400,404,408,412,416,420,424,428,432],{"title":397,"path":398,"categories":399},"Do I Really Need HTTPS? What Happens If My Website Is Not Secure","\u002Fblog\u002Fdo-i-really-need-https",[376],{"title":401,"path":402,"categories":403},"How Much Should a Business Website Cost? What You Are Actually Paying For","\u002Fblog\u002Fhow-much-should-a-business-website-cost",[376],{"title":405,"path":406,"categories":407},"How Often Should I Update My Website? A Realistic Guide for Business Owners","\u002Fblog\u002Fhow-often-should-i-update-my-website",[376],{"title":409,"path":410,"categories":411},"What Is Website Hosting and Does It Really Matter? A Non-Technical Guide","\u002Fblog\u002Fwhat-is-website-hosting-and-does-it-matter",[376],{"title":413,"path":414,"categories":415},"Why Did My Website Get Hacked? Common Causes and What To Do Next","\u002Fblog\u002Fwhy-did-my-website-get-hacked",[376],{"title":417,"path":418,"categories":419},"Why Do Emails From My Website Go to Spam? What Business Owners Need to Check","\u002Fblog\u002Fwhy-do-emails-from-my-website-go-to-spam",[376],{"title":421,"path":422,"categories":423},"Why Does Google Not Show My Business Website? A Plain-English SEO Checklist","\u002Fblog\u002Fwhy-does-google-not-show-my-business-website",[376],{"title":425,"path":426,"categories":427},"Why Does My Contact Form Stop Working? Common Causes and Easy Fixes","\u002Fblog\u002Fwhy-does-my-contact-form-stop-working",[376],{"title":429,"path":430,"categories":431},"Why Does My Site Look Broken on Mobile? The Most Common Non-Technical Causes","\u002Fblog\u002Fwhy-does-my-site-look-broken-on-mobile",[376],{"title":433,"path":434,"categories":435},"Why Is My Website Slow? 7 Simple Things That Usually Cause It","\u002Fblog\u002Fwhy-is-my-website-slow-7-simple-things-that-usually-cause-it",[376],1777992044463]