React Hook is called in function which is neither a React function component or a custom React Hook function

Question

My blog.js component :

import {useStaticQuery, graphql} from "gatsby"


const blog = () => {
    const {site} = useStaticQuery(
        graphql`
      query {
        site {
          siteMetadata {
            title
          }
        }
      }
    `
    )
    return site.siteMetadata
}

export default blog

Gatsby docs : https://www.gatsbyjs.org/docs/use-static-query/

I've tried to fixed this issue !!

have any solution ??

Thanks

ksav · Accepted Answer · 2020-12-08T23:08:55.647

9

Capitalise the name of your component:

import {useStaticQuery, graphql} from "gatsby"


const Blog = () => {
  const {site} = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
          }
        }
      }
    `
  )
  return site.siteMetadata
}

export default Blog

User-Defined Components Must Be Capitalized

We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.

edited Dec 08 '20 at 23:08

answered May 11 '20 at 05:14

ksav

20,015
6
46
66

Not working !! It's working , when i use `StaticQuery` . https://www.gatsbyjs.org/docs/static-query/ – May 11 '20 at 05:43
Are you able to provide more information as to exactly what's not working? – ksav May 11 '20 at 05:44

React Hook is called in function which is neither a React function component or a custom React Hook function

1 Answers1