gatsby 页面中的 GraphQL 依赖查询

问题描述

我想在 Gatsby index.js 页面上嵌套两个查询。我在我的帖子中有前面的内容，其中包括特色图片的名称和目录。查询 #1 是检索这些字符串，查询 #2 是使用这些字符串的组合来构建 childImageSharp。

我尝试过的是：

import React from "react"
import { css } from "@emotion/core"
import { graphql,compose } from "gatsby"
import { rhythm } from "../utils/typography"
 import { GatsbyImage,getimage } from "gatsby-plugin-image"

function Home({ mdHeaderData,introImage }) {
  return (
    <div>
      {mdHeaderData.allMarkdownRemark.edges.map(({ node }) => (
        <h4>node.frontmatter.gallery</h4>
        <GatsbyImage image={getimage(introImage.node)} />
    </div>
  );
};

const mdHeaderQuery = graphql`
  query mdHeaderQuery {
    allMarkdownRemark {
      edges {
        node {
          id
          frontmatter {
            gallery
            introimage
        }
      }
    }
  }
`

const introImageQuery = graphql`
  query  introImageQuery {
    allFile(
      filter: {
        sourceInstanceName: {eq: "galleries"},relativePath: {eq: $introImagePath}
      }
    ) {
      nodes {
        childImageSharp {
          gatsbyImageData(
            width: 500
          )
        }
      }
    }
  }
`

export default compose(
  graphql(mdHeaderQuery,{
    name: 'mdHeaderData'
  }),graphql(introImageQuery,{
    name: 'introImage',options: ({ mdHeaderData }) => ({
      variables: {
        introImagePath: mdHeaderData.allMarkdownRemark.edges.node.frontmatter.gallery + "/" + mdHeaderData.allMarkdownRemark.edges.node.frontmatter.introimage
      }
    })
  })
) (Home)

我收到 SSR 错误，说 graphql 未定义并指向 export default compose 行。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

graphql graphql graphql-compose