Dynamic chart updates with GraphQL subscriptions

Explain how to use GraphQL subscriptions to dynamically update TanStack React Charts in real-time as new data becomes available.

import { useSubscription } from '@apollo/client';
import { Chart } from 'react-chartjs-2';
import React, { useState, useEffect } from 'react';

const DATA_SUBSCRIPTION = gql`
  subscription OnNewData {
    newData {
      xValue
      yValue
    }
  }
`;

This code imports necessary libraries and defines a GraphQL subscription that listens for new data.

const DynamicChart = () => {
  const [chartData, setChartData] = useState({
    datasets: [{
      label: 'Live Data',
      data: [],
      backgroundColor: 'rgba(255, 99, 132, 0.6)',
    }],
  });

  const { data, loading } = useSubscription(DATA_SUBSCRIPTION);

  useEffect(() => {
    if (!loading && data) {
      const newPoint = {
        x: data.newData.xValue,
        y: data.newData.yValue,
      };
      setChartData((prevData) => ({
        ...prevData,
        datasets: [{
          ...prevData.datasets[0],
          data: [...prevData.datasets[0].data, newPoint],
        }],
      }));
    }
  }, [data, loading]);

  return <Chart type='line' data={chartData} />;
};

This code defines a React component that uses the subscription to update the chart dynamically. It listens for new data from the subscription, updates the state with the new data point, and re-renders the chart.