Question

我不知道为什么我的所有查询都无法在我的Gatsby项目中使用。

   import React from "react"
   import { graphql } from "gatsby"

   const site_info = () => {
     const query = graphql`
       query title {
         allSite {
           edges {
             node {
               siteMetadata {
                  title
               }
             }
           }
         }
       }
     `
     console.log(query)
     return <p>Test</p>
   }

   export default site_info

在控制台中，我期待有一个可以在元数据中看到标题的对象，但是，我得到了2641826822。

我直接从GraphiQL复制了查询，在这里看到了预期的结果，所以不确定为什么它在这里不起作用。

Answer 1

在Gatsby模式中使用GraphQL查询（使用提供的页面查询）某些数据时，您的数据存储为页面prop（不在查询变量本身中），因此您需要来访问它们props并遍历对象直到找到数据。理想的结构数据应类似于：

const yourPage = ({ data }) => {
  const { title } = data.allSite.edges[0].node.siteMetadata;

  return <Layout>
    <h1>{title}</h1>
  </Layout>;
};

export const yourPageData = graphql`
       query title {
         allSite {
           edges {
             node {
               siteMetadata {
                  title
               }
             }
           }
         }
       }
     `;

export default yourPage;

基本上，在上面的代码段中，我将data分解为prop（而不是进行prop.data），并且我对data.allSite.edges[0].node.siteMetadata进行了同样的操作以得到{ {1}}。

在您深入研究GraphQL之前，我建议您阅读一些有关Querying Data in Pages with GraphQL的文档。

GraghQL查询返回整数而不是对象

1 个答案: