让我们说我想在盖茨比的博客上的一篇文章中加入50张图片。使用GraphQL获取图像。我最终为50个图像中的每个图像写了非常重复的查询,如下所示:
export const query = graphql`
query ArticleImageQuery {
coverImage: imageSharp(id: {regex: "/cover-image/" }) {
sizes(maxWidth: 700, maxHeight: 525) {
...GatsbyImageSharpSizes
}
},
artisan1: imageSharp(id: {regex: "/artisan1/" }) {
sizes(maxWidth: 700, maxHeight: 525) {
...GatsbyImageSharpSizes
}
},
artisan2: imageSharp(id: {regex: "/artisan2/" }) {
sizes(maxWidth: 700, maxHeight: 525) {
...GatsbyImageSharpSizes
}
},
artisan3: imageSharp(id: {regex: "/artisan3/" }) {
sizes(maxWidth: 700, maxHeight: 525) {
...GatsbyImageSharpSizes
}
},
johannystrom1: imageSharp(id: {regex: "/johan-nystrom1/" }) {
sizes(maxWidth: 700, maxHeight: 525) {
...GatsbyImageSharpSizes
}
},
johannystrom2: imageSharp(id: {regex: "/johan-nystrom2/" }) {
sizes(maxWidth: 700, maxHeight: 525) {
...GatsbyImageSharpSizes
}
},
johannystrom3: imageSharp(id: {regex: "/johan-nystrom3/" }) {
sizes(maxWidth: 700, maxHeight: 525) {
...GatsbyImageSharpSizes
}
},
johannystrom4: imageSharp(id: {regex: "/johan-nystrom4/" }) {
sizes(maxWidth: 700, maxHeight: 525) {
...GatsbyImageSharpSizes
}
},
fratello1: imageSharp(id: {regex: "/fratello/" }) {
sizes(maxWidth: 700, maxHeight: 525) {
...GatsbyImageSharpSizes
}
},
booksAntiques1: imageSharp(id: {regex: "/books-antiques1/" }) {
sizes(maxWidth: 700, maxHeight: 525) {
...GatsbyImageSharpSizes
}
},
booksAntiques2: imageSharp(id: {regex: "/books-antiques2/" }) {
sizes(maxWidth: 700, maxHeight: 525, cropFocus: CENTER) {
...GatsbyImageSharpSizes
}
},
pastor1: imageSharp(id: {regex: "/pastor1/" }) {
sizes(maxWidth: 700, maxHeight: 525) {
...GatsbyImageSharpSizes
}
},
pastor2: imageSharp(id: {regex: "/pastor2/" }) {
sizes(maxWidth: 700, maxHeight: 525, cropFocus: CENTER) {
...GatsbyImageSharpSizes
}
},
pastor3: imageSharp(id: {regex: "/pastor3/" }) {
sizes(maxWidth: 700, maxHeight: 525) {
...GatsbyImageSharpSizes
}
},
libertyOrDeath1: imageSharp(id: {regex: "/liberty-death1/" }) {
sizes(maxWidth: 700, maxHeight: 525, cropFocus: CENTER) {
...GatsbyImageSharpSizes
}
},
libertyOrDeath2: imageSharp(id: {regex: "/liberty-death2/" }) {
sizes(maxWidth: 700, maxHeight: 525, cropFocus: CENTER) {
...GatsbyImageSharpSizes
}
},
kaisla1: imageSharp(id: {regex: "/kaisla1/" }) {
sizes(maxWidth: 700, maxHeight: 525, cropFocus: CENTER) {
...GatsbyImageSharpSizes
}
},
blockDylan1: imageSharp(id: {regex: "/block-dylan1/" }) {
sizes(maxWidth: 700, maxHeight: 525, cropFocus: CENTER) {
...GatsbyImageSharpSizes
}
},
blockDylan2: imageSharp(id: {regex: "/block-dylan2/" }) {
sizes(maxWidth: 700, maxHeight: 525, cropFocus: CENTER) {
...GatsbyImageSharpSizes
}
},
blockDylan3: imageSharp(id: {regex: "/block-dylan3/" }) {
sizes(maxWidth: 700, maxHeight: 525, cropFocus: CENTER) {
...GatsbyImageSharpSizes
}
},
blockDylan4: imageSharp(id: {regex: "/block-dylan4/" }) {
sizes(maxWidth: 700, maxHeight: 525, cropFocus: CENTER) {
...GatsbyImageSharpSizes
}
},
blockDylan5: imageSharp(id: {regex: "/block-dylan5/" }) {
sizes(maxWidth: 700, maxHeight: 525, cropFocus: CENTER) {
...GatsbyImageSharpSizes
}
},
/* The list goes on, you get the idea... */
}
`;
这严重违反了DRY(不要重复自己)的原则。我试图摆弄碎片,但我是一个菜鸟用户,我只能弄清楚如何重复使用这些重复的代码并只写一次,而不是50次?
我能做些什么来改善这个?
理想情况下,我喜欢拥有一个代码,我可以在其中编写一次重复部分,然后将其重复用于我所提取的每个图像。例如:
/* NOTE: FICTIONAL PSEUDOCODE */
const imageQuery = graphql`
query ImageQuery($path: String!) {
imageSharp(id: {regex: $path }) {
sizes(maxWidth: 700, maxHeight: 525) {
...GatsbyImageSharpSizes
}
},
}
`;
export const query = graphql`
query ArticleImageQuery {
coverImage: ImageQuery("/cover-image/"),
artisan1: ImageQuery("/artisan1/"),
artisan2: ImageQuery("/artisan2/"),
artisan3: ImageQuery("/artisan3/"),
johannystrom1: ImageQuery("/johan-nystrom1/"),'
/* ... AND SO ON */
}
`;
答案 0 :(得分:1)
GraphQL片段没有参数。有关更多信息,请参见this github issue。
当我遇到与您相似的问题时,请通过一次查询选择所有需要的图像,然后在视图中进行处理。例如,这样的查询:
export const query = graphql`
{
allFile(filter: {absolutePath: {regex: "/img/o-meni/im/"}}) {
edges {
node {
id
name
publicURL
childImageSharp {
sizes(maxWidth: 700, maxHeight: 525) {
...GatsbyImageSharpSizes
}
}
}
}
}
}
`
然后您可以过滤特定图像,例如artisan1
或React组件中的任何图像。要显示它们,您可以使用如下代码:
{
this.props.data.allFile.edges.map(({ node }) =>
<a href={node.publicURL} key={node.id}>
<Img sizes={node.childImageSharp.sizes} alt={node.name} title={node.name} />
</a>
)
}