Gatsby useStatciQuery react hook errors

user_13722746 0
Viewed 96

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> 
    );
};
gatsby react-hooks javascript
2 Answers

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.

Custom Hooks

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> 
  );
};
user_86908570

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

user_137227460
Related