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

投稿日: 2022-04-20 2022-10-07
タグ: Vue.js

この記事では、 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. 次に、ブラウザで新しいGridsomeプロジェクトを開きます。 http://localhost:8080.

RESTAPIからのデータの取得

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

$ npm i axios

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

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 そのため、Gridsome GraphQL APIから返されたアイテムを、ループするだけで済みます。

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

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

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

結論

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

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

getdocs

13036