I'm a newer developer and just diving right into gatsby. I have a working db and the graphql endpoint works fine in the sandbox page, but when I moved the query into a hook that is called by a component, I'm running into an error
React Hook "useStaticQuery" is called in function "getCoinsByBuzz" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks
The code is very similar to the examples on Gatsby's docs.
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>
);
};
The code is very similar to the examples on Gatsby's docs.
I don't know anything specific about the docs, but from what I can see it seems like your getCoinsByBuzz function is intended to be used as a custom React hook. React hook names (must) start with a "use-" prefix.
Do I have to name my custom Hooks starting with “use”? Please do. This convention is very important. Without it, we wouldn’t be able to automatically check for violations of rules of Hooks because we couldn’t tell if a certain function contains calls to Hooks inside of it.
There's nothing intrinsically special about React hooks, they are plain Javascript functions with some special usage rules applied against them.
Suggested update:
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>
);
};
Turns out I had issues because apparently rules are different for hooks in typescript and I'm using regular javascript.
Regardless I decided this component needs to be dynamic so I'm going to use axios to fetch data on page render