尝试使用 Gatsby 的 useStaticQuery 从中获取节点信息

Question

我正在尝试使用 useStaticQuery 从 GraphQL Gatsby 获取信息，但返回的数据是 undefined，我不明白为什么，因为在我的 http://localhost:8000/___graphql 中我收到了很好的信息。

我的代码不是页面组件，这是我使用Static Query的原因

我的代码是这样的：

import React from "react";
import { useStaticQuery, graphql} from "gatsby";


export default function MenuMD () {
    const { data } = useStaticQuery(
    graphql`
      query {
                allFile(filter: {sourceInstanceName: {eq: "markdown"}}) {
                    edges {
                        node {
                            childrenMarkdownRemark {
                                frontmatter {
                                    slug
                                    title
                                }
                            }
                        }
                    }
                }
      }
    `
    )
    console.log('static data', data);

    return<>Menu from MarkDown</>
}

http://localhost:8000/___graphql 的预期结果是这样的：

{
  "data": {
    "allFile": {
      "edges": [
        {
          "node": {
            "childMarkdownRemark": {
              "frontmatter": {
                "slug": "/projet_m",
                "title": "Projet M"
              }
            }
          }
        },
        {
          "node": {
            "childMarkdownRemark": {
              "frontmatter": {
                "slug": "/projet_n",
                "title": "Projet N"
              }
            }
          }
        }
      ]
    }
  },
  "extensions": {}
}

undefined 返回可能有原因吗？

Answer 1

假设查询在 GraphiQL 环境中工作，并且你的数据结构中有一个 "markdown" sourceInstanceName，试试这样：

export default function MenuMD() {
  const data = useStaticQuery(
    graphql`
      query {
        allFile(filter: { sourceInstanceName: { eq: "markdown" } }) {
          edges {
            node {
              childrenMarkdownRemark {
                frontmatter {
                  slug
                  title
                }
              }
            }
          }
        }
      }
    `
  );
  console.log("static data", data);

  return <>Menu from MarkDown</>;
}

在组件而不是页面中使用静态查询没有错，结果必须完全相同（就输出而言）。

您的数据应该在data.allFile.edges 内（或直接分解为{ allFile }），而不是直接将静态查询的结果解构为data。这就是为什么 data 在您的案例中是 undefined 的原因。