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

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;

基本上，在上面的 sn-p 中，我将 data 解构为 prop（而不是做 prop.data），我对 data.allSite.edges[0].node.siteMetadata 做同样的事情以获得 title。

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