StaticQuery has it's own limitations (that's why it's are called static) and they do not allow any dynamic parameter. As it shows Gatsby documention:
How StaticQuery differs from page query
StaticQuery can do most of the
things that page query can, including fragments. The main differences
are:
- page queries can accept variables (via pageContext) but can only be
added to page components
StaticQuery does not accept variables (hence
the name “static”), but can be used in any component, including pages
- StaticQuery does not work with raw React.createElement calls; please
use JSX, e.g.
Of course, you can filter using a hardcoded value, this is actually the only solution available for you can't filter using a dynamic value.
Check your localhost:8000/___graphql playground to see if your query works (it should). Usually chained values in GraphQL must be filtered using filter: { country__code: { eq:"CA" }}
Ideally, your useStaticQuery hook file should look like:
import { graphql, useStaticQuery } from 'gatsby';
export const useYourItems = () => {
const yourItems = useStaticQuery(
graphql`
query MyQuery {
allStrapiAvailableLanguageByMarkets(filter: {country: {code: {eq: "CA"}}}) {
nodes {
country {
code
}
languages {
code
name
}
}
}
}`,
);
return yourItems.allStrapiAvailableLanguageByMarkets;
};
Then, in another component:
const yourItems = useYourItems();