Запрос GraghQL возвращает целое число вместо объекта

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

Когда вы запрашиваете (используя запрос страницы, как вы предоставили) некоторые данные с помощью GraphQL в схеме Gatsby, ваши данные сохраняются как страница 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, чтобы получить title.

Я бы порекомендовал прочитать некоторую документацию о Запрос данных на страницах с помощью GraphQL , прежде чем погрузиться в GraphQL на камнях.