GridsomeとRESTAPIデータソースを使用した静的サイトの作成

この記事では、 Gridsome を使用して静的Webサイトを作成する方法を見ていきます。これは、Vue.jsとGraphQLに基づいており、機能的に多くの点でGatsby.jsに似ている静的サイトジェネレーターです。ここでは、RESTAPIデータソースからデータを取得するGridsomeを使用して簡単なサイトを構築します。

このNewsAPIからデータを取得します。

入門

開始するには、GridsomeCLIをインストールしてプロジェクトを作成する必要があります。これを行うには、次を実行します。

$ npm install --global @gridsome/cli

または糸で：

$ yarn global add @gridsome/cli

次に、以下を実行してGridsomeサイトを作成します。

$ gridsome create news-site

次に、news-siteディレクトリに移動し、gridsome developを実行します。次に、http://localhost:8080に移動して、ブラウザで新しいGridsomeプロジェクトを開きます。

RESTAPIからのデータの取得

REST APIからデータを取得するには、最初に次のコマンドを実行してAxiosHTTPクライアントを追加する必要があります。

$ npm i axios

次に、.envファイルを作成し、APIキーを追加してニュースAPIにアクセスします。

GRIDSOME_NEWS_API_KEY=your_api_key

your_api_keyを、NewsAPIWebサイトから取得した独自のキーに置き換えます。

次に、次のように、データを取得するコードをgridsome.server.jsファイルに追加できます。

gridsome.server.js

const axios = require('axios')

module.exports = function (api) {
  api.loadSource(async actions => {
    const { data } = await axios.get(`
      http://newsapi.org/v2/top-headlines?country=us&apiKey=${process.env.GRIDSOME_NEWS_API_KEY}`)
    const collection = actions.addCollection({
      typeName: 'Posts'
    })

    for (const item of data.articles) {
      collection.addNode({
        content: item.content,
        title: item.title
      })
    }
  })
}

上記のコードは、APIからデータを取得し、それらをコレクションに追加して、任意のVueコンポーネントで取得できるようにします。

.envの環境変数は、プロパティとしてprocess.envにロードされます。

コードを変更した後、gridsome.server.jsの変更を有効にするためにアプリを再起動する必要があります。これは、プロジェクトのロード時にフェッチが実行されるためです。

次に、index.vueで、既存のコードを次のように変更します。

index.vue

<template>
  <div>
    <div v-for="edge in $page.allPosts.edges" :key="edge.node.title">
      <h1 v-html="edge.node.title" />
      <div v-html="edge.node.content"></div>
    </div>
  </div>
</template>

<page-query>
query {
  allPosts {
    edges {
      node {
        content
        title
      }
    }
  }
}
</page-query>

GraphQLクエリから返される結果の形状は次のとおりです。

query {
  allPosts {
    edges {
      node {
        content
        title
      }
    }
  }
}

そして、それはtemplateで利用できるので、GridsomeGraphQLAPIから返されたアイテムをループするだけです。

GraphQLサンドボックスでクエリをテストする場合は、http://localhost:8080/___exploreに移動し、page-queryセクションで同じクエリを実行して結果を確認できます。

次に、http://localhost:8080/に戻ると、gridsome.server.jsにアイテムを追加したので、NewsAPIからタイトルとコンテンツを取得します。

配列からアイテムをレンダリングするために通常のv-forを使用し、APIデータからの生のHTMLコンテンツを表示するためにv-htmlを使用します。

結論

ご覧のとおり、GridsomeとAxiosを使用してRESTAPIからデータを簡単に取得できます。プロジェクトのロード時にデータがフェッチされます。データをフェッチしたら、Gridsome独自のGraphQL APIからデータを取得できるため、テンプレートにアイテムを表示できます。 ✨

Gridsomeについて詳しく知りたい場合は、さらに3つの記事をご覧ください。