时间戳

首页 > 解决方案 > GraghQL 查询返回整数而不是对象

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

问题描述

我不明白为什么我的任何查询都不适用于我的 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 复制了查询，在那里我看到了预期的结果，所以不确定为什么它在这里不起作用。

标签： reactjsgraphqlgatsby

解决方案

当您在 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为 a prop（而不是做prop.data），并且我做同样的事情data.allSite.edges[0].node.siteMetadata来获得title.

在你深入研究 GraphQL 之前，我会推荐一些有关使用 GraphQL 在页面中查询数据的文档。

推荐阅读