using useStaticQuery in custom hook breaks build

[nickburczyk]

Having a similar issue as described in issue 29416 here

I am going through the gatsby tutorials, and in section 4 it suggests moving the metadata query into a custom hook to avoid repetition.

Pro Tip: useStaticQuery lends itself really well when creating small, reusable React components. You can even create custom React hooks, for example:

import * as React from "react"
 import { graphql, useStaticQuery } from "gatsby"

const useSiteMetadata = () => {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return data.site.siteMetadata
}

export default useSiteMetadata

When I do anything other than inline queries inside my component, I get the following error when building (locally and on netlify):

failed Compiling Gatsby Functions - 0.571s
Failed to validate error [Error [ValidationError]:
"error" must be of type object] {
  _original: {
    context: {},
    error: [
      ModuleParseError: Module parse failed: Unexpected
token (99:8)
      You may need an appropriate loader to handle this
file type, currently no loaders are configured to
process this file. See
https://webpack.js.org/concepts#loaders
      |
      |       const HeadElement = (
      >         <pageComponent.Head
{...filterHeadProps(pageComponentProps)} />
      |       )

here is my useMetadata hook in src/api/useMetadata.js
import { useStaticQuery, graphql } from "gatsby"

import { useStaticQuery, graphql } from "gatsby"

export const useMetadata = () =>  {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
    }`
  )
  return data
}

And here is the implementation in the SEO component (used the same way in the layout component)

import React from 'react';
import { useMetadata } from '../api/useMetadata';

const Seo = ({title}) => {
    const data = useMetadata()
    return (
        <title>{title} | {data.site.siteMetadata.title}</title>
    )
}

export default Seo

If I do inline queries and remove the src/api folder completely, the build succeeds.

If I write the hook inside each file like below, it succeeds as well , but only if the src/api folder is deleted (this doesn't solve the repetition issue but it does clean up the component itself).

import React from 'react';
import { useStaticQuery, graphql } from 'gatsby';

const useMetadata = () => useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
    }`
  )

const Seo = ({title}) => {
    const data = useMetadata()
    return (
        <title>{title} | {data.site.siteMetadata.title}</title>
    )
}

export default Seo

Why can I not get a custom hook to work?

[nickburczyk]

Update: I got the build to succeed by renaming the src/api folder to src/hooks. Is API a protected folder name similar to pages in gatsby?

[violy]

Yes, as mentioned in the Gatsby Functions doc :

So src/api is a reserved directory for Gatsby.