Using a React hook in separate file to the component

Question

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 becomes 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>
  )
}

The only ground rule here is hooks should be invoked from within the component. 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 component (and function) breakdown and you could move the broken components and functions to separate files. — kabirbaidhya
– 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
– Kyle Sharp, Commented Oct 7, 2020 at 6:37

Peter Lehnhardt · Accepted Answer · 2020-10-07 08:10:45Z

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

answered Oct 7, 2020 at 8:10

Peter Lehnhardt

5,0431 gold badge21 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

phpwebdev Over a year ago

Thank you for your answer. However I am trying to actually import the graphql file. That would be great. I am getting an error on the gatsby graphql loader.

Anhdevit · Accepted Answer · 2020-10-07 04:18:01Z

0

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

✅ Call Hooks from React function components.

✅ 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.org/docs/hooks-rules.html

My suggestion is you can wrap it into component 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",
  },
]

edited Oct 7, 2020 at 4:18

answered Oct 7, 2020 at 4:01

Anhdevit

2,0683 gold badges19 silver badges36 bronze badges

2 Comments

Kyle Sharp Over a year ago

I know how react hooks work. I am asking if there is anyway I can get it to work in the 'data.js' file.

Kyle Sharp Over a year ago

what if I have multiple images in my query then? I simplified my code, but my actual code loads 3 different images

Collectives™ on Stack Overflow

Using a React hook in separate file to the component

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related