Pass string to a GraphQL StaticQuery in Gatsby

问题:

I am trying to understand how StaticQuery works in a Gatsby/GraphQL workflow, and as a trial I want to build an article header with a background image.

The image is defined in frontmatter of the markdown file I am building from (frontmatter.feature).

I know the nature of StaticQuery is... well... static, so I cannot pass dynamic variables to a query. But that's not what I am doing - I think.

Here's my example:

articleHeader(frontmatter) {
  if (frontmatter.feature) {
    return (
      <StaticQuery
        query={graphql`
          query($base: String!) {
            file(base: { eq: $base }) {
              publicURL
            }
          }
        `}
        render={data => (
          <ArticleHeader
            style={"background-image:url(" + data.file.publicURL + ")"}
          >
            <Heading>{frontmatter.title}</Heading>
          </ArticleHeader>
        )}
      />
    );
  } else return <Heading>{frontmatter.title}</Heading>;
}

My problem is that I want to pass frontmatter.feature to my query so that I can query for base: { eq: $base } ... but how?

Note: I've set up plugins properly, and I can query for files through the graphiql interface without issues.

回答1:

If you modify frontmatter.feature so that it's a relative path to your image, it will turn into a File node, meaning you can query the publicURL in wherever you query for frontmatter:

export const query = graphql`
  allMarkdownRemark {
    nodes {
      frontmatter {
        title
        feature {
          publicURL
        }
      }
    }
  }
`

Then, your article header component can simply be

const ArticleHeader = ({ frontmatter }) => {
  const { title, feature } = frontmatter
  if (!feature) return <Heading ... />
  return (
    <div style={`background-image:url(${feature.publicURL})`}>
      <Heading ...>
    </div>
  )
}

回答2:

StaticQuery doesn't currently accept GraphQL arguments. You can use standard queries with arguments taken from context on Gatsby pages so if you need to access context, use a 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.

How StaticQuery differs from page query