I am wanting to create a data file for my project instead of having everything in the one file, however I am using React hooks to load in images. This bees a problem when I want to have everything in separate files. The code gives me the 'Invalid hook call' message which I understand why it is wrong, but can't figure out how to get it to work for me.

EventData.js

import React from "react"
import Image from "gatsby-image"
import { graphql, useStaticQuery } from "gatsby"

const getImages = graphql`
  {
    btu: file(relativePath: { eq: "eventImage/btu.jpeg" }) {
      childImageSharp {
        fixed(height: 120, width: 500) {
          ...GatsbyImageSharpFixed_withWebp_tracedSVG
        }
      }
    }
  }
`

const data = useStaticQuery(getImages)
export const details = [
  {
    id: 1,
    img: <Image fixed={data.btu.childImageSharp.fixed} />,
    date: "2 Oct 2020",
    distance: "30km - 160km",
    name: "Brisbane Trail Ultra",
    location: "Brisbane, QLD",
  },
]

EventCalendar.js

const EventCalendar = () => {
  return (
    <Layout>
      <section>
        {details.map(details => {
          return <EventCard key={details.id} {...details}></EventCard>
        })}
      </section>
    </Layout>
  )
}

I am wanting to create a data file for my project instead of having everything in the one file, however I am using React hooks to load in images. This bees a problem when I want to have everything in separate files. The code gives me the 'Invalid hook call' message which I understand why it is wrong, but can't figure out how to get it to work for me.

EventData.js

import React from "react"
import Image from "gatsby-image"
import { graphql, useStaticQuery } from "gatsby"

const getImages = graphql`
  {
    btu: file(relativePath: { eq: "eventImage/btu.jpeg" }) {
      childImageSharp {
        fixed(height: 120, width: 500) {
          ...GatsbyImageSharpFixed_withWebp_tracedSVG
        }
      }
    }
  }
`

const data = useStaticQuery(getImages)
export const details = [
  {
    id: 1,
    img: <Image fixed={data.btu.childImageSharp.fixed} />,
    date: "2 Oct 2020",
    distance: "30km - 160km",
    name: "Brisbane Trail Ultra",
    location: "Brisbane, QLD",
  },
]

EventCalendar.js

const EventCalendar = () => {
  return (
    <Layout>
      <section>
        {details.map(details => {
          return <EventCard key={details.id} {...details}></EventCard>
        })}
      </section>
    </Layout>
  )
}

• javascript
• reactjs
• react-hooks

Share Improve this question Follow edited Oct 7, 2020 at 7:56 skyboyer 23.8k77 gold badges6262 silver badges7171 bronze badges asked Oct 7, 2020 at 3:49 Kyle SharpKyle Sharp 17711 gold badge22 silver badges99 bronze badges 2

• The only ground rule here is hooks should be invoked from within the ponent. Here you are triggering it from outside, which won't work. It's not necessary that you put everything in the same file, but you need to achieve this with ponent (and function) breakdown and you could move the broken ponents and functions to separate files. – kabirbaidhya Commented Oct 7, 2020 at 5:49
• Been messing around with my code based on your suggestions, and I am just not getting it – Kyle Sharp Commented Oct 7, 2020 at 6:37

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You have to define a custom hook, which looks something like this in your case:

import React from "react"
import Image from "gatsby-image"
import { graphql, useStaticQuery } from "gatsby"

const getImages = graphql`
  {
    btu: file(relativePath: { eq: "eventImage/btu.jpeg" }) {
      childImageSharp {
        fixed(height: 120, width: 500) {
          ...GatsbyImageSharpFixed_withWebp_tracedSVG
        }
      }
    }
  }
  `;

export function useDetails() {    
  const data = useStaticQuery(getImages);

  return [
    {
      id: 1,
      img: <Image fixed={data.btu.childImageSharp.fixed} />,
      date: "2 Oct 2020",
      distance: "30km - 160km",
      name: "Brisbane Trail Ultra",
      location: "Brisbane, QLD",
    },
  ];
}

To define custom hooks, define a function, which returns your desired values. In this function you can all hooks available from the react API.

Then in your main file write

const EventCalendar = () => {
  const details = useDetails();

  return (
    <Layout>
      <section>
        {details.map(detail => {
          return <EventCard key={details.id} {...detail}></EventCard>
        })}
      </section>
    </Layout>
  )
}

Only Call Hooks from React Functions Don’t call Hooks from regular JavaScript functions. Instead, you can:

✅ Call Hooks from React function ponents.

✅ Call Hooks from custom Hooks (we’ll learn about them on the next page). Another thing: Inside the map, you should change details to detail because is an item

const EventCalendar = () => {
  return (
    <Layout>
      <section>
        {details.map(detail => {
          return <EventCard key={details.id} {...detail}></EventCard>
        })}
      </section>
    </Layout>
  )
}

You can read about hook is here: https://reactjs/docs/hooks-rules.html

My suggestion is you can wrap it into ponent like that:

const ImageHook = () => {
  const data = useStaticQuery(getImages)
  return <Image fixed={data.btu.childImageSharp.fixed}/>
}

export const details = [
  {
    id: 1,
    img:  <ImageHook />,
    date: "2 Oct 2020",
    distance: "30km - 160km",
    name: "Brisbane Trail Ultra",
    location: "Brisbane, QLD",
  },
]