This from the Gatsby v4 documentation's page on query extraction suggests to me that queries are extracted from dependencies as well as from the files in the site's src directory:
This documentation isn’t up to date with the latest version of Gatsby.
Outdated areas are:
- queries in dependencies (node_modules) and themes are now extracted as well
- add meta key for hook in JSON in diagram
I have updated to v4 of Gatsby to take advantage of query extraction from dependencies, but my dependency's query doesn't seem to be extracted. When I fire up my site with gatsby develop, I get this error:
Error in function graphql in ./.cache/gatsby-browser-entry.js:93
It appears like Gatsby is misconfigured. Gatsby related
graphqlcalls are supposed to only be evaluated at compile time, and then compiled away. Unfortunately, something went wrong and the query was left in the compiled code. Unless your site has a complex or custom babel/Gatsby configuration this is likely a bug in Gatsby.
This references a static query inside a component I have added as a dependency of this site. Here's what that component looks like:
import React from 'react';
import {CSSTransition} from 'react-transition-group';
import {useStaticQuery, graphql} from 'gatsby';
import {GatsbyImage, getImage} from 'gatsby-plugin-image';
const MyImage = ({src = null, alt = '', item = null, ...props}) => {
let classList = [props.className];
if (item) {
classList.push(item.class);
src = item.src;
alt = item.alt;
}
const classes = classList.join(' ').trim();
delete props.className;
if (src.includes('//')) {
return <img src={src} alt={alt} />;
} else {
const images = useStaticQuery(graphql`
query {
files: allFile(filter: {relativeDirectory: {regex: "/.*?/"}}) {
edges {
node {
relativePath
childImageSharp {
gatsbyImageData(layout: FULL_WIDTH, placeholder: NONE)
}
}
}
}
}
`);
const file = images.files.edges.find((n) => {
return n.node.relativePath.includes(src);
});
if (!file) {
return null;
}
const image = getImage(file.node);
return (
<CSSTransition
{...props}
appear={true}
in={true}
classNames="transition"
timeout={500}
>
<GatsbyImage image={image} alt={alt} className={classes} />
</CSSTransition>
);
}
};
export default MyImage;
I'm left wondering if this note in the documentation is incorrect and static queries are still not extracted from dependencies in node_modules or if there's some other problem I'm missing. This component works perfectly if I drop it into the src directory of the site, so it definitely seems dependency queries are not being extracted here.
UPDATE: This is not what it seemed. It looks like the query is being extracted from my dependency. I can even see that the query runner is running the query and returning the result. Still looking, but I'm not sure where the code is that is supposed to do the static replacement. I'm guessing that must be where everything is falling down.