Блог

Итак, я создал начальный сайт Gatsby, выполнив следующее:

У меня есть несколько простых материалов на GraphCMS:

Я пытаюсь запросить GraphCMS, чтобы вернуть все сообщения страницы. При экспериментировании с GraphiQL локально я использую этот запрос:

   query PageQuery {
    allGraphCmsPage {
      nodes {
        headline
        tagline
      }
    }
  }
  

Который возвращает именно то, что я хочу

В моем index.js Я запрашиваю GraphCMS с помощью этого кода:

 const {graphCmsPage = {}} = useStaticQuery (graphql`
  query PageQuery {
    allGraphCmsPage {
      nodes {
        headline
        tagline
      }
    }
  }
`);
  

Когда я утешаю.запишите это или попробуйте сослаться на любое из свойств, все они равны нулю / (сам возвращаемый объект является прототипом)

Я очень новичок в GraphQL amp; Gatsby, поэтому я полагаю, что я что-то неправильно решаю.

При использовании запроса страницы ваши данные хранятся в props.data object . В вашем случае это будет:

 props.data.allGraphCmsPage
  

Весь код должен выглядеть так:

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

 const HomePage = ({data}) => {
  console.log(data)
  return (
    <div>
      Hi!
    </div>
  )
}

export const query = graphql`
 query PageQuery {
    allGraphCmsPage {
      nodes {
        headline
        tagline
      }
    }
  }
`

export default HomePage
  

Имейте в виду, что вы используете статический запрос (или useStaticQuery хук) вместо запроса страницы, что я бы предложил. Проверьте документацию о статических и обычных запросах для получения дополнительной информации, но в основном все полученные данные в компонентах верхнего уровня должны собираться с помощью запроса страницы, а все метаданные и другие статические данные должны извлекаться с помощью статического запроса, говоря в целом.