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

Verify and retrieve information from the Dynamics CRM Web API with the help of Angular 2 (TypeScript)

Combinations of Typescript dependent unions

Developing mongoose models using TypeScript for subdocuments

Typescript: Verifying the type of an interface

What is the best way to programmatically define the value for the MaterialUI grid size property using TypeScript?

Type inference error in TypeScript occurs within a conditional statement when the condition relies on the output of a function call rather than a boolean expression

"Incorporating the node_modules folder into the Express.js compilation process

Tips on preventing the copying of .txt and .xml files with the fs-extra.copySync function

Error occurred when trying to import an external module using an invalid hook call

Utilizing Material-UI with MobileDialog HOC in TypeScript: A Beginner's Guide

Setting the root directory and output directory can be a bit tricky when dealing with source code scattered across multiple folders. Here's

Utilizing React-hook-Form to transfer data between two SelectBoxes

The 'type' property within the NGRX Effect is not present in the type Observable<any[]>

Here's how you can combine several elements from one array and assign them to the first element of another array:

Angular - Exploring the process of creating a secondary standalone build for a specific section of an application

What is the best approach for fetching a refined selection of items from an array of IDs using GraphQL?

Implementing Immer in Typescript

Record modified fields using Angular Reactive Forms and store them in a list

Looking to determine if two elements exist within an array? Seeking a boolean result based on their presence

Obtain the data from a promise in Angular