Gatsby.jsでAPIから取得した一部のデータを[key,value]の連想配列にしたい

Question

Gatsby.jsでGitHubAPIからリポジトリのデータを取得したデータから、
プログラム言語の名前と名前ごとのサイズを[key,value]の連想配列にしたいのですがどうすればできますか？

query ($number_of_repos: Int!) {
    viewer {
      name
      avatarUrl
      isHireable
      resourcePath
      repositories(last: $number_of_repos, privacy: PUBLIC, orderBy: { field: STARGAZERS, direction:ASC } ) {
        nodes {
          name
          description
          homepageUrl
          forkCount
          createdAt
          updatedAt
          resourcePath
          languages(last: 9, orderBy: { field: SIZE, direction:ASC } ) {
            totalSize
            totalCount
            edges {
              size
              node {
                name
                color
              }
            }
          }

          stargazers {
            totalCount
          }
        }
      }
    }
  }

このGraphQLのクエリからlanguagesのsizeとnameを配列のデータにしたいです。
ソースファイルはhttps://github.com/yumi9502/githubStart1よろしくお願いします。

Answer 1

この方法が最善ではないかもしれませんが自己解決しました。

はじめにGitHubのAPIのデータを取得するためuseStaticQueryを使いました。
まずはreact@^16.8.0とreact-dom@^16.8.0をターミナルでインストールします。

yarn add react@^16.8.0 react-dom@^16.8.0

そして次のコードでプログラム言語のデータを目的の連想配列にすることができました。

import React from  "react"
import {useStaticQuery,graphql} from "gatsby"
import {Doughnut} from "react-chartjs-2"

const LangData=()=>{
  const tempData= useStaticQuery(graphql`
  query GitData{
    githubData {
      data{
        viewer {
          name
          avatarUrl
          isHireable
          resourcePath
          repositories {
            totalCount
            nodes {
              name
              description
              homepageUrl
              forkCount
              createdAt
              updatedAt
              resourcePath
              languages {
                totalSize
                totalCount
                edges {
                  size
                  node {
                    name
                    color
                  }
                }
              }
              stargazers {
                totalCount
              }
            }
          }
        }
      }
    }
  }
  `)
  // リポジトリのtotalCountを取得してリポジトリごとの言語の名前とバイト数を取得する
const totalRepo=tempData.githubData.data.viewer.repositories.totalCount
const langName1=[]
const langSize1=[]
for(let i=0;i<totalRepo;i++){
  let langEachRepo=tempData.githubData.data.viewer.repositories.nodes[i].languages.totalCount
  for(let j=0;j<langEachRepo;j++){
    langName1.push(tempData.githubData.data.viewer.repositories.nodes[i].languages.edges[j].node.name)
    langSize1.push(tempData.githubData.data.viewer.repositories.nodes[i].languages.edges[j].size)
  }
}

// 言語の名前とバイト数を[key,value]からなる配列にする
var langSet = [];
for(var i=0;i<langSize1.length;i++){
  langSet.push([langName1[i],langSize1[i]]);
}

// 言語の名前ごとの合計を出す
var sum={}; // 連想配列
for(var i=0;i<langSet.length;i++){
  var key=langSet[i][0];     // i++されるたび変数keyにlangSet[i]のキーを入れる
  if(key in sum){            // sumのキーに変数keyと同じキーが存在するかチェック
    sum[key]+=langSet[i][1]; // 存在するときは同じキーごとにlangSet[i]の値を足す
  }else{
    sum[key]=langSet[i][1];  //存在しないときはキーに値を入れる
  }
}

delete sum['Mask']
delete sum['HLSL']
delete sum['Mathematica']
delete sum['ShaderLab']

const label1=[];
const data1=[];
for(var key in sum){
  label1.push(key);
  data1.push(sum[key])
}
  const data={
    labels:label1,
    datasets:[{
      backgroundColor:["#178600","#2B7489","#e34c26","#563D7C","#f1e05a"],
      data:data1,
    },],
  };
return(
  <Doughnut data={data} />
)
}
export default LangData 

JavaScriptやフレームワークを始めたばかりでまだ改善できるかもしれないですが今後に活かすようにしていきたいです。