让我们学习Gridsome并创建一个SPA【第五天 GraphQL教程】

2 年 ago
雅, 悟
2 minutes

日程表

    • 1日目 要件定義編

 

    • 2日目 環境構築編

 

    • 3日目 ドーナッツグラフ編

 

    • 4日目 棒グラフ編

5日目 GraphQL編←今ここ
6日目 GraphQL編2
7日目 GraphQL編3
8日目 GraphQL編4
9日目 デプロイ編

前提条件 tí

    • node.js v8.3以上

 

    • yarn or npmが入っている(Document見るとyarnの方が推奨とのこと)

 

    Gridsomeのプロジェクトを作成している

从CSV文件导入数据

我們將準備好CSV作為數據來源。這次我們將使用CSV，但也可以使用以Markdown格式撰寫的文件。請參閱https://gridsome.org/docs/fetching-data/#csv。

// 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/
  })
}

将要导入的CSV文件放置在/src/data/目录下。
这次导入的CSV文件将跳过第一行，从第二行开始导入。

然后，通过将导入的数据添加到actions.addCollection的集合中，并通过collection.addNode(asset)将其添加到该集合中，就可以使用GraphQL来处理数据。

GraphQL是一种查询语言

import-data.eb9be63.3e0083b3c8c40a300ab593b006f88025.png

让我们来实际使用GraphQL。

image02.png

实际创建的查询

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

使用GraphQL将数据传递给前端处理。

接下来，我们将实际在每个页面上使用所创建的查询。

<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>

在标签中编写GraphQL查询。然后可以通过$page来访问并传递给前端处理。
由于之前的图形组件是通过数组传递的，所以我还创建了一个将其转换为数组的方法。

作者留白

盼望已久的盂兰盆节假期也已过了一半。剩下的一半啊，时间过得真快。
而且明明是盂兰盆节假期，为什么每天还要收到一次工作的Slack消息呢。。

bannerAds