Using the useStaticQuery hook outside of a function component is not allowed and will result in an invalid hook call error. Remember to only call

Question

Using the useStaticQuery hook outside of a function component is not allowed and will result in an invalid hook call error. Remember to only call

I am currently facing an issue while trying to retrieve values using useStaticQuery from my gatsby-config.js file. Below are snippets of my code.

Does anyone have any suggestions on how to resolve this problem?

Thank you in advance.

Repository:
https://github.com/koji/portfolio

package.json

"dependencies": {
    "@babel/core": "^7.5.5",
    "gatsby": "^2.13.28",
    "gatsby-link": "^2.2.2",
    "gatsby-plugin-react-helmet": "^3.1.2",
    "gatsby-plugin-sass": "^2.1.3",
    "gatsby-plugin-typescript": "^2.1.2",
    "gatsby-source-filesystem": "^2.1.8",
    "gatsby-source-instagram-all": "^2.0.5",
    "gatsby-transformer-remark": "^2.6.10",
    "node-sass": "^4.12.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "webpack": "^4.36.1"
  },
  "devDependencies": {
    "@types/react": "^16.8.24",
    "@types/react-dom": "^16.8.5",
    "@types/react-helmet-async": "^1.0.0",
    "env-cmd": "^9.0.3",
    "eslint-plugin-react-hooks": "^1.6.1",
    "gatsby-plugin-tslint": "^0.0.2",
    "tslint": "^5.18.0",
    "tslint-loader": "^3.5.4",
    "tslint-react": "^4.0.0",
    "typescript": "^3.5.3"
  }

siteMetadata.ts

import { useStaticQuery, graphql } from "gatsby";
export const useSiteMetadata = () => {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            author
          }
        }
      }
    `);
  return site.siteMetadata.title;
};

import * as React from "react";
import { useSiteMetadata } from 'siteMetadata'


export default class Header extends React.Component {
  render() {
    const {title} = useSiteMetadata();
    return (
        <h1>
          <Link className={headerStyles.title} to="/">
            {title}
          </Link>
        </h1>
    )
  }
}

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: "page title",
    author: "me"
  }
}

typescript graphql gatsby

Answer 1

Answer №1

The issue lies in the first letter of the component's name not being capitalized;

Moreover, useStaticQuery should be used to render the component's children that rely on this query within the component itself;

The modified version of the UseSiteMetadata component would be:

import { useStaticQuery, graphql } from "gatsby";
export const useSiteMetadata = () => {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            author
          }
        }
      }
    `);
  return (
        <h1>
          <Link className={headerStyles.title} to="/">
            {site.siteMetadata.title}
          </Link>
        </h1>
  );

As for the revised Header component:

import * as React from "react";
import { UseSiteMetadata } from 'siteMetadata'


export default class Header extends React.Component {
  render() {
    return (<UseSiteMetadata /> )
  }
}

Answer 2

The issue lies in the first letter of the component's name not being capitalized;

Moreover, useStaticQuery should be used to render the component's children that rely on this query within the component itself;

The modified version of the UseSiteMetadata component would be:

import { useStaticQuery, graphql } from "gatsby";
export const useSiteMetadata = () => {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            author
          }
        }
      }
    `);
  return (
        <h1>
          <Link className={headerStyles.title} to="/">
            {site.siteMetadata.title}
          </Link>
        </h1>
  );

As for the revised Header component:

import * as React from "react";
import { UseSiteMetadata } from 'siteMetadata'


export default class Header extends React.Component {
  render() {
    return (<UseSiteMetadata /> )
  }
}

Answer 3

Answer №2

This question may be dated, but it's possible that others will come across the same issue.

The issue lies in returning a string from the title found in the useSiteMetadata hook, only to destructure it in the Header component.

It seems like you intended to return an object from the hook:

return {title: site.siteMetadata.title};

Alternatively, for consistency with the hook name:

return site.siteMetadata;

Remember not to capitalize hooks or treat them as components as mentioned in other responses. Refer to the React documentation for more information on this.

Answer 4

This question may be dated, but it's possible that others will come across the same issue.

The issue lies in returning a string from the title found in the useSiteMetadata hook, only to destructure it in the Header component.

It seems like you intended to return an object from the hook:

return {title: site.siteMetadata.title};

Alternatively, for consistency with the hook name:

return site.siteMetadata;

Remember not to capitalize hooks or treat them as components as mentioned in other responses. Refer to the React documentation for more information on this.

Using the useStaticQuery hook outside of a function component is not allowed and will result in an invalid hook call error. Remember to only call

Answer №1

Answer №2

Similar questions

What methods can I use to integrate a Google HeatMap into the GoogleMap object in the Angular AGM library?

Difficulty establishing a connection between Typescript and Postgres results in a prolonged

Facing an issue with grafbase | graphql query - runs smoothly in development environment but encountering errors in production

Unable to transfer props object to React component using TypeScript

``Why Ionic 3 Popover Sizes Should Adapt to Different Screen

Evaluating Angular/Typescript and its capabilities

Converting JSON into an interface in TypeScript and verifying its validity

How can we use tsyringe (a dependency injection library) to resolve classes with dependencies?

Using Angular 5 to access a variable within a component while iterating through a loop

Automatically arrange TypeScript import statements in alphabetical order in WebStorm / PhpStorm

Issue with ngx-extended-pdf-viewer when using URL

Using TypeScript to work with asynchronous child_process.exec operations

Tips for utilizing the "??=" syntax in Typescript

Using styled-components and typescript to override props

Unexpected Union Type Return from Apollo Server

Does Angular 8 development mode implement tree-shaking?

Tips for invoking TypeScript code from Rust WebAssembly

Connect a datetime-local typed input to a Date attribute in Angular 2

Guide to highlighting manually selected months in the monthpicker by utilizing the DoCheck function in Angular

Typescript's Confusion with Array Types: Understanding Conditional Types