CloudFirestoreのデータをグラフ化したい

Question

前提

Next(React)でポモドーロタイマーアプリを作っています！
現状以下のコードでApexChartsを用いたグラフの描画ができております。

ApexCharts

src/views/ApexCharts/index.tsx

import React, { Component, useState, useEffect } from 'react';
import { db } from '../../../lib/db';
import ReactApexChart from 'react-apexcharts';

class Graph extends Component<{}, { series: any[]; options: any }> {
  constructor(props) {
    super(props);

    this.state = {
      series: [
        {
          name: 'React',
          data: [31, 40, 28, 51, 42, 109, 100],
        },
        {
          name: 'Next',
          data: [11, 32, 45, 32, 34, 52, 41],
        },
      ],
      options: {
        chart: {
          height: 350,
          type: 'area',
        },
        dataLabels: {
          enabled: false,
        },
        stroke: {
          curve: 'smooth',
        },
        xaxis: {
          type: 'datetime',
          categories: [
            '2021-06-10T00:00:00.000Z',
            '2021-06-11T01:30:00.000Z',
            '2021-06-12T02:30:00.000Z',
            '2021-06-13T03:30:00.000Z',
            '2021-06-14T04:30:00.000Z',
            '2021-06-15T05:30:00.000Z',
            '2021-06-16T06:30:00.000Z',
          ],
          labels: {
            datetimeFormatter: {
              year: 'yyyy',
              month: "MMM'yy",
              day: 'MM/dd',
              hour: 'HH:mm',
            },
          },
        },
        tooltip: {
          x: {
            format: 'dd/MM/yy HH:mm',
          },
        },
      },
    };
  }

  render() {
    return (
      <div id="chart">
        <ReactApexChart options={this.state.options} series={this.state.series} type="area" height={350} />
      </div>
    );
  }
}

export default Graph;

ホーム画面

pages/index.tsx

import React, { useState, useEffect, useContext } from 'react';
import dynamic from 'next/dynamic';
import firebase from 'util/firebase';
import styles from '../styles/auth.module.css';

//ApexCharts読み込むのにNext.jsで必要な設定
const DynamicGraphComponentWithNoSSR = dynamic(() => import('../views/ApexCharts/index'), { ssr: false });

const Home = ({ currentUser }) => {

  return (
    <div className="container">
        <div style={{ marginBottom: 40 }}>
          <p className="title">作業時間</p>
          <React.StrictMode>
            <DynamicGraphComponentWithNoSSR />
          </React.StrictMode>
        </div>
        
      </div>
      <SimpleBottomNavigation />
    </div>
  );
};

export default Home;

グラフ

実現したいこと

DB連携

上記のように、現状ではApexChartsのデータはコードに手動で加えたものであり、実践的な内容ではありません。
そこで、タイマーの時間をFirebaseのCloudFirestoreから取得しApexChartsのグラフを実装中に以下のエラーメッセージが発生しました。

CloudFirestore

発生している問題・エラーメッセージ

Unhandled Runtime Error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

該当のソースコード

ApexCharts：src/views/ApexCharts/index.tsx

...

class Graph extends Component<{}, { series: any[]; options: any }> {
  constructor(props) {
    super(props);

    const [chartcategories, setChartCategories] = useState([]);
    useEffect(() => {
      const unSub = db.collection("categories").onSnapshot((snapshot)=>{ // CloudFirebaseのcategoriesコレクションのデータを取得
        setChartCategories(
          snapshot.docs.map((doc)=>({name: doc.data().name, time: doc.data().time}))
        );
      });
      return ()=> unSub();
    }, []);

    {chartcategories.map((categroy) => 
      <h3>{categroy.name}</h3>
    )}
...

試したこと

React Hooksの書き方がまずいのだと思いますが改善できておりません。

他にも、CloudFirestoreからデータを取得してグラフ化するという検索ワードでヒットした記事を読んでいますが、
Next.jsではなくVue.jsを用いた情報が多く、グラフもApexChartsではなくChart.jsのほうが情報が多く解決策を得られません。

CloudFireStoreから取得したデータをApexChartsのデータ要素として扱う寳保を教えていただきたいです！

補足情報（FW/ツールのバージョンなど）

package.json

  "dependencies": {
    "firebase": "^8.6.5",
    "next": "10.2.1",
    "apexcharts": "^3.27.1",
    "chart.js": "^3.3.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
  },
  "devDependencies": {
    "@types/node": "^15.3.0",
    "@types/react": "^17.0.6",
    "@types/react-dom": "^17.0.5",
    "typescript": "^4.2.4"
  }

Answer 1

重要なこととして、Reactのフックは関数コンポーネントのための機能であり、クラスコンポーネントで使うものではありません。
ApexChartsはクラスコンポーネントでなので、Hooksを使えません。

考え方としては、以下のどちらかが必要です。（細かい書き方等は省きます）

• 関数コンポーネントに書き換える
• クラスコンポーネントのまま、必要なタイミングでFirestoreにアクセスするように実装する

もし、ApexChartsが実質Firestoreからのデータフェッチとそのレンダリング（render,useEffectなど）しか行わないのであれば、比較的容易ではあるかなと思います。

もし、関数コンポーネントへの書き換えがそれなりに大変そうであれば、useEffectに近い位置づけになるcomponentDidMountなどのメソッドにデータ取得を実装する感じになるでしょうか。

いずれにせよ、「どうしたいか」に依存しがちな話ではあるので、Reactのドキュメントを読み返しつつ検討してみてください。