Estoy tratando de actualizar un gráfico con los valores que obtengo de la API. No sé cómo modificar este gancho useEffect. Si pudieras aconsejarme, te debería mucho.

Déjame mostrar mi código:

 import React, { useEffect, useState } from "react"; import { useQuery, gql } from "@apollo/client"; import { Bar } from "react-chartjs-2"; const total = gql` query GetIntell { webs( sort: "severity:desc", pagination: { start: 0, limit: 10 }, filters: {site :{eq: "nist"}} ) { data { id attributes { dateAdded severity } } } } ` export default function Test() { const {data }= useQuery(total) const [chartData, setChartData] = useState({}) useEffect (() => {. <--------HERE COMES THE ERROR Line 29:5: setChartData({ labels: data.webs.data.map((t) => t.attributes.severity), datasets: [ { label: "Price in USD", data: data.webs.data.map((t) => t.attributes.id), backgroundColor: [ "#ffbb11", "#ecf0f1", "#50AF95", "#f3ba2f", "#2a71d0" ] } ] }), [data] }) console.log(data) return ( <div className="container"> <Bar data={chartData} options={{ plugins: { title: { display: true, text: "Cryptocurrency prices" }, legend: { display: true, position: "bottom" } } }} /> </div> ); }

Básicamente, necesito obtener los datos del gráfico, solo después de recuperar los datos constantes de graphql. No tengo idea de cómo modificar el código para que funcione bien.

He visto mucho código antiguo con este error, así que no pude encontrar un tema más nuevo con este error para verificarlo.

Edición posterior Así es como se ven los datos