Soy un desarrollador nuevo y me estoy sumergiendo directamente en Gatsby. Tengo una base de datos en funcionamiento y el punto final de graphql funciona bien en la página de sandbox, pero cuando moví la consulta a un gancho al que llama un componente, me encuentro con un error.
React Hook "useStaticQuery" se llama en la función "getCoinsByBuzz" que no es ni un componente de la función React ni una función React Hook personalizada. Los nombres de los componentes de React deben comenzar con una letra mayúscula. Los nombres de React Hook deben comenzar con la palabra "use" react-hooks/rules-of-hooks
El código es muy similar a los ejemplos en los documentos de Gatsby.
import { graphql, useStaticQuery } from "gatsby"; export const getCoinsByBuzz = () => { const { dataset } = useStaticQuery(graphql` query coinsByBuzz { coins { coinByBuzzChange { coinName timestamp symbol value buzzScore buzzScoreDelta6 timestampDelta6 } } }`); return dataset.coinsByBuzz; }; import * as React from "react" // import { Line } from "react-chartjs-2"; import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, } from "chart.js"; import { getCoinsByBuzz } from "../hooks/getCoinsByBuzz" ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend); export const LineChart = () => { const { dataset } = getCoinsByBuzz(); console.log(dataset); return ( <div style={{ width: '750px' }}> <p>{dataset}</p> </div> ); };El código es muy similar a los ejemplos en los documentos de Gatsby.
No sé nada específico sobre los documentos, pero por lo que puedo ver, parece que su función getCoinsByBuzz está destinada a usarse como un enlace React personalizado. Los nombres de ganchos de reacción ( deben ) comienzan con un prefijo "use-".
¿Tengo que nombrar mis Hooks personalizados comenzando con "uso"? Por favor, hazlo. Esta convención es muy importante. Sin él, no podríamos verificar automáticamente las violaciones de las reglas de Hooks porque no podríamos saber si una determinada función contiene llamadas a Hooks dentro de ella.
No hay nada intrínsecamente especial en los ganchos de React, son funciones simples de Javascript con algunas reglas de uso especiales aplicadas en su contra.
Actualización sugerida:
import { graphql, useStaticQuery } from "gatsby"; export const useGetCoinsByBuzz = () => { const { dataset } = useStaticQuery(graphql` query coinsByBuzz { coins { coinByBuzzChange { coinName timestamp symbol value buzzScore buzzScoreDelta6 timestampDelta6 } } }` ); return dataset.coinsByBuzz; };...
import { useGetCoinsByBuzz } from "../hooks/getCoinsByBuzz"; export const LineChart = () => { const { dataset } = useGetCoinsByBuzz(); return ( <div style={{ width: '750px' }}> <p>{dataset}</p> </div> ); };Resulta que tuve problemas porque aparentemente las reglas son diferentes para los ganchos en mecanografiado y estoy usando javascript normal.
Independientemente, decidí que este componente debe ser dinámico, así que usaré axios para obtener datos en la representación de la página.