GatsbyJS ソースプラグインを使用してファイルの内容を取得する

2019-06-19

ソースプラグインの導入

ソースプラグインとはGatsbyJSがローカルファイル、データベース、WordPressなどからデータを取得するのに利用するプラグインです。 今回はローカルファイルを取得するgatsby-source-filesystemを利用します。

ソースプラグインのgatsby-source-filesystemのインストール

何はともあれgatsby-source-filesystemをインストールします。
GatsbyJSプロジェクト作成に指定したテンプレートによってはすでにインストールされている場合があります。

npm install --save gatsby-source-filesystem

次に、gatsby-config.jsのplugins配列にプラグインの設定を記述します。
とりあえずプロジェクトディレクトリ直下のsrcディレクトリのファイルを取得できるようにpathに指定します。

module.exports = {
  plugins: [
    {      
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,//ソース名
        path: `${__dirname}/src/`,//ファイルの置き場所
      },
    },
  ]  
}

GraphiQLを使いファイルの内容を取得する

GatsbyJSプロジェクトではGraphiQLというGraphQLの開発環境が利用できます。
GraphiQL

開発サーバー起動後、
http://localhost:8000/___graphql
にアクセスするとGraphiQLが表示されます。

gatsby_graphql_1.png

検索対象の[allFile]と[file]がgatsby-source-filesystemによって追加されたものとなります(前回のsiteMetadataは[allSite][site]の中にあります)。
[allFile]はファイルを一覧で取得、[file]は特定の1ファイルの取得で使用します。
例としてファイル名(name)、相対パス(relativePath)、ソース名(sourceInstanceName)を表示します。
※ソース名はgatsby-config.jsのoptionに指定したnameのこと。
GraphiQLの実行は上部の三角のボタンか、Ctrl+Enterで実行できます。

query MyQuery {
  allFile {
    edges {
      node {
        name
        relativePath
        sourceInstanceName
      }
    }
  }
}

現在、srcディレクトリにindex.jsしか該当しませんが、以下の様に表示されます。

gatsby_graphql_2.png

gatsby-source-filesystemでいろいろ指定してみる

gatsby-source-filesystemで複数対象にする

テスト用にいくつかディレクトリとファイルを作成します。

|-- /src
|   |-- /pages
|   |   |-- index.js
|   |   |-- about.js
|   |-- /components
|   |-- Header.js
|
|-- /contents
    |-- access_log.txt
    |-- app_log.txt
    |-- db_log.xt
    |-- f.png
    |-- header.png
    |-- icon.png

今の設定だとcontentsディレクトリが検索対象にならないので、contentsも対象に含めるようにgatsby-config.jsに追記します。

module.exports = {
  plugins: [
    {      
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,//ソース名
        path: `${__dirname}/src/`,//ファイルの置き場所
      },
    },
    {      
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,//ソース名
        path: `${__dirname}/contents/`,//ファイルの置き場所
      },
    },
  ]  
}

開発サーバーを再起動して、再度、GraphQLを実行すると検索結果にsourceInstanceNameがsrcとdataのデータが増えていることが確認できます。

gatsby_graphql_3.png

gatsby-source-filesystemで読み取らないファイルを指定する。

gatsby-config.jsでgatsby-source-filesystemを記述するときにignoreを指定すると読み取らないファイルを指定できます。
src/componentsとcontentsディレクトリ配下のtxtファイルを含めないようにします。

module.exports = {
  siteMetadata: {
    title: 'タイトル',
    description: '説明分',
  },
  plugins: [
    {      
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,//名前
        path: `${__dirname}/src/`,//ファイルの場所
        ignore: [`**/components`], //componentsディレクトリは含まない
      },
    },
    {      
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,//ソース名
        path: `${__dirname}/contents/`,//ファイルの置き場所
        ignore: [`**/*.txt`], //拡張子txtは含まない
      },
    },
  ]
}

開発サーバー再起動後、GraphQLを実行してcomponentsディレクトリとtxtファイルが除外されていることが確認できます。

gatsby_graphql_4.png

GrapgQLでいろいろ指定してみる

GraphQLでもSQLの様にソートや条件を指定できます。

ソートと取得件数を指定する

sortとlimitを使うと、ソートと取得件数が指定できます。
nameで昇順、3件取得します。

query MyQuery {
  allFile(
    sort: {
      fields: [name],
      order: ASC
    },
    limit: 3) {
    edges {
      node {
        name
        relativePath
        sourceInstanceName
        base
      }
    }
  }
}

直接GraphQLを変更もできますが、 左側の検索対象の場所でsortやlimitを入力しても、自動でGraphQLを更新されます。

gatsby_graphql_5.png

条件を指定する

filterを使うと、条件を指定してデータを取得できます。
今回はsourceInstanceNameがdataのものを取得します。

query MyQuery {
  allFile(filter: {
      sourceInstanceName: {
        eq: "data"
      }
  }) {
    edges {
      node {
        name
        relativePath
        sourceInstanceName
        base
      }
    }
  }
}

gatsby_graphql_6.png

結果を画面に表示する

前回と同様にindex.jsでGraphQLの結果を表示します。
namae順でソートしたGraphQLの結果が、dataに渡されるのでnameとrelativePathを繰り返し表示します。

import React from "react"

// 1. graphqlのインポート
import { graphql } from "gatsby"

// 3. 2の結果がdataに自動的に渡されてくる
export default ({data}) => {
    //dataの内容を表示してみる
    console.log(data);
    return(
        <div>
        {data.allFile.edges.map(({ node }, index) => (
        <div key={index}>
            ファイル名:{node.name}、想定パス:{node.relativePath}
        </div>
        ))}
        </div>
    )
}

// 2.allFileの中からname、relativePath、sourceInstanceNameを取得する
export const query = graphql`
    query {
        allFile(
            sort: {
              fields: [name],
              order: ASC
            })
         {
          edges {
            node {
              name
              relativePath
              sourceInstanceName
            }
          }
        }      
    }
`

画面に結果が表示されることを確認します。

gatsby_graphql_7.png

■同じタグの記事(最新5件)
GatsbyJS FaunaDBからデータを取得する
GatsbyJS 検索機能を実装する(JsSearchを利用)
GatsbyJS PostgreSQLの内容を取得する
GatsbyJS rehypeReactでマークダウンの内容を変更する
GatsbyJS マークダウンにコンポーネントを表示する
■同じタグの記事を見る