在Gatsby中，我如何将相对路径文件传递给也正在提取查询的模板?

Question

在盖茨比中，我编写了一个帖子模板:

singlePost.js:

import React from 'react'
import { graphql } from 'gatsby'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import { H1 } from '../elements'
import { Container, Post, FeatureImage } from '../components'
const singlePost = ({ data }) => {
const featureImage = data.mdx.frontmatter.featureImg.childImageSharp.fixed
return (
<Container>
<FeatureImage fixed={featureImage} />
<Post>
<H1 margin=" 0 0 2rem 0">{data.mdx.frontmatter.title}</H1>
<MDXRenderer>{data.mdx.body}</MDXRenderer>
</Post>
</Container>
)
}
export const pageQuery = graphql`
query SinglePostQuery($id: String!) {
mdx(id: { eq: $id }) {
body
frontmatter {
date
excerpt
featureImg {
childImageSharp {
fixed(width: 1920) {
...GatsbyImageSharpFixed
}
}
}
title
slug
}
}
}
`
export default singlePost

在我的gatsby-node.js我从鼻涕虫中获得数据:

data.allMdx.edges.map(edge => {
const slug = edge.node.frontmatter.slug
const id = edge.node.id
actions.createPage({
path: slug,
component: require.resolve(`./src/templates/singlePost.js`),
context: { id },
})
})

在markdown文件的前部有一个特征图像:

---
title: Bacon Ipsum
slug: bacon
date: 2021-02-09
featureImg: nature.jpg
excerpt: Bacon ipsum dolor amet pastrami prosciutto meatball fatback, andouille drumstick shank burgdoggen brisket cow turkey.
---

如果post markdown文件没有图像，我得到一个错误:

无法读取null属性' childdimagesharp '

我可以访问我设置的默认图像:

const defaultImage = useStaticQuery(graphql`
query {
default: file(relativePath: { eq: "default.jpg" }) {
publicURL
}
}
`)

但是当我尝试查询内容和默认值时:

const defaultImage = useStaticQuery(graphql`
query SinglePostQuery($id: String!) {
mdx(id: { eq: $id }) {
body
frontmatter {
date
excerpt
featureImg {
childImageSharp {
fixed(width: 1920) {
...GatsbyImageSharpFixed
}
}
}
title
slug
}
}
default: file(relativePath: { eq: "default.jpg" }) {
publicURL
}
}
`)

我得到一个错误:

如果您不使用页面查询，而是使用useStaticQuery/StaticQuery你看到这个错误是因为他们目前不支持变量。

在Gatsby中，我如何在查询slug的同时将默认图像传递给Feature image组件?

Answer 1

错误日志指出，useStaticQuery(因为它是一种静态查询类型)不接受变量，因此得名。

在盖茨比中，我如何查询鼻涕虫，但也有通过默认值image到Feature image组件?

在使用页面查询时，您可以使用与附加id相同的上下文来传递图像。

data.allMdx.edges.map(edge => {
const slug = edge.node.frontmatter.slug
const id = edge.node.id
const imagePath = edge.node.featureImg || 'default.jpg'
actions.createPage({
path: slug,
component: require.resolve(`./src/templates/singlePost.js`),
context: { 
id 
imagePath
},
})
})

注意:您可能需要查询您的gatsby-node.js中的图像。如果需要，将imagePath更改为另一个更好地匹配您的数据结构的标识符。

然后，在你的模板中:

import React from 'react'
import { graphql } from 'gatsby'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import { H1 } from '../elements'
import { Container, Post, FeatureImage } from '../components'
const singlePost = ({ data }) => {
const featureImage = data.mdx.frontmatter.featureImg.childImageSharp.fixed
return (
<Container>
<FeatureImage fixed={featureImage} />
<Post>
<H1 margin=" 0 0 2rem 0">{data.mdx.frontmatter.title}</H1>
<MDXRenderer>{data.mdx.body}</MDXRenderer>
</Post>
</Container>
)
}
export const pageQuery = graphql`
query SinglePostQuery($id: String!, $imagePath: String) {
mdx(id: { eq: $id }) {
body
frontmatter {
date
excerpt
featureImg {
childImageSharp {
fixed(width: 1920) {
...GatsbyImageSharpFixed
}
}
}
title
slug
}
}
default: file(relativePath: { eq: $imagePath }) {
publicURL
}
}
`
export default singlePost

注意:添加$imagePath作为一个可空值(通过删除感叹号，!)，因为，正如你所说的，不是所有的帖子都会有它。

尝试删除featureImg块，如果它仍然破坏查询。因为:

const imagePath = edge.node.featureImg || 'default.jpg'

您的imagePath变量将始终包含所需的数据，或者您的featureImg，或者您的默认数据。关键是要进行单独的查询。