More than 3 years have passed since last update.

Gridsome入門 SPAを作ってみよう【5日目 GraphQL編】

Last updated at 2020-08-16Posted at 2020-08-12

スケジュール

前提条件

node.js v8.3以上
yarn or npmが入っている(Document見るとyarnの方が推奨とのこと)
Gridsomeのプロジェクトを作成している

CSVからデータをインポートする

CSV用意してデータソースとして使用します。今回はCSVを使いますが、markdownで書かれたファイルなども使ったりできます。
https://gridsome.org/docs/fetching-data/#csv

gridsome.server.js

// Server API makes it possible to hook into various parts of Gridsome
// on server-side and add custom data to the GraphQL data layer.
// Learn more: https://gridsome.org/docs/server-api/

// Changes here require a server restart.
// To restart press CTRL + C in terminal and run `gridsome develop`

const {readFileSync} = require('fs');
const parse = require('csv-parse/lib/sync');
module.exports = function (api) {
  api.loadSource(async (actions) => {
    // インポートするCSV
    const input = readFileSync('./src/data/assetbalance_202008.csv', 'utf8');

    const Assets = parse(input, {
      from_line: 2,
      skip_empty_lines: true,
    });

    const collection = actions.addCollection({
      typeName: 'Assets',
    });

    for (const asset of Assets) {
      collection.addNode(asset);
    }
  })

  api.createPages(({ createPage }) => {
    // Use the Pages API here: https://gridsome.org/docs/pages-api/
  })
}

/src/data/ ディレクトリにインポートしたいCSVを配置します。
今回インポートするCSVは一行目は飛ばして、二行目からインポートするようにしました。

そしてインポートしたデータをactions.addCollection コレクションとして追加して、そのコレクションにcollection.addNode(asset); として追加していくことでGraphQLを使ってデータを扱うことができるようになります。

GraphQLとは

import-data.eb9be63.3e0083b3c8c40a300ab593b006f88025.png

画像は https://gridsome.org/docs/data-layer/#the-graphql-data-layer より引用僕も今勉強中ですが、様々なデータソースを吸収してGraphQLを使うと便利って感じですかね。 GraphQLはAPI用のクエリ言語として開発されたっていう経緯があるみたいです。

実際にGraphQLを使ってみよう

GridsomeにはGraphQLを試せるplaygroundが用意されています。これがすごい便利。
僕みたいな初見な人でも調べながら試しながらできるのですごい助かります。
playgroundはgridsome develop を実行して、http://localhost:8080/___explore でアクセスできます。

こんな感じの画面が表示されます。
左のクエリエディター？の画面に実行したいクエリを書いて、再生ボタンっぽいところを押すとクエリが実行されます。
GraphQLについてはこちらを参照
https://graphql.org/
もしくはplaygroundで右側についてるDOCSを開くと、実行しているクエリについても仕様を見ることができます。

実際に作ったクエリ

query {
  tickers: allAssets(order: ASC,filter: {_0:{eq:"米国株式"}}) {
    edges {
      node {
        _1
      }
    }
  }
  valuations: allAssets(order: ASC,filter: {_0:{eq:"米国株式"}}) {
    edges {
      node {
        _4
        _8
      }
    }
  }
}

filterの指定が難しかった。色々調べてできました。
nodeの中身が一つ一つのデータなのですが、CSVの一列目が_0,二列目が_1...みたいに追加されています。
filterで_0の値が米国株式となっているものだけ取得するという形にしています。eqがイコールですね。
他にもne(not イコール)などもありました。

GraphQLを使ってフロントエンドの処理に渡す

次は作ったクエリを実際に各ページで使うようにします。

src/pages/portfolio/index.vue

<template>
  <Layout>
    <h1>Portfolio</h1>
    <Doughnut :labels="this.formatLabels($page.tickers.edges)" :chartData="this.formatChartData($page.valuations.edges)"></Doughnut>
  </Layout>
</template>
<page-query>
query {
  tickers: allAssets(order: ASC,filter: {_0:{eq:"米国株式"}}) {
    edges {
      node {
        _1
      }
    }
  }
  valuations: allAssets(order: ASC,filter: {_0:{eq:"米国株式"}}) {
    edges {
      node {
        _4
        _8
      }
    }
  }
}
</page-query>
<script>
import Doughnut from "../../components/chart/Doughnut"
export default {
  components: {
    Doughnut
  },
  methods: {
    formatLabels: function (labels) {
      return labels.map(item => item['node']['_1']);
    },
    formatChartData: function (chartData) {
      return chartData.map(item => item['node']['_4'] * item['node']['_8']);
    }
  },
  metaInfo : {
    title: 'Hello, world!'
  }
}
</script>

<style>
.home-links a {
  margin-right: 1rem;
}
</style>

<page-query> というタグの中にGraphQLのクエリを書きます。そしてフロントエンドの処理に渡すには$pageという名前でアクセスできます。
前回までに作ったグラフのcomponentsには配列で渡しているので、配列に直すmethodsも作りました。

あとがき

いよいよお盆休みも折り返し。残り半分かー。早い。
そしてお盆休みなのに一日一回は仕事のslackくるのなに。。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Gridsome入門 SPAを作ってみよう 【5日目 GraphQL編】