Uncaught TypeError: Невозможно прочитать свойство 'data' undefined с помощью Gatsby и graphQl - PullRequest
Новая
       26

Uncaught TypeError: Невозможно прочитать свойство 'data' undefined с помощью Gatsby и graphQl

0 голосов
/ 12 октября 2018

Я впервые тестирую Gatsby и GraphQl и примеряю простой пример ....

У меня возникает эта ошибка, когда я хочу отобразить заголовок с помощью запроса GraphQl в моеммакет?: Uncaught TypeError: Невозможно прочитать свойство 'site' с неопределенным

вот мой макет: 

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

export default ({ children, data  }) =>
  <div style={{margin: 'auto', maxWidth: 760}}>
  <h2>{data.site.siteMetadata.title}</h2>
  {children}
  <footer>
    Copyright blablb abolajoa.
  </footer>
</div>

export const query = graphql`
query LayoutQuery {
  site {
    siteMetadata {
      title
    }
  }
}
`

и мой gatsby-config.js: 

module.exports = {
  siteMetadata: {
    title: `Hardcoders`
  },
  plugins: [
    {
      resolve: 'gatsby-plugin-typography',
      options: {
        pathToConfigModule: 'src/utils/typography.js'
      }
    },
  ]
}

и вот конфигурация проекта: 

"dependencies": {
    "gatsby": "^2.0.0",
    "gatsby-plugin-typography": "^2.2.0",
    "react": "^16.5.1",
    "react-dom": "^16.5.1",
    "react-typography": "^0.16.13",
    "typography": "^0.16.17",
    "typography-theme-github": "^0.15.10"
  }

есть идеи, что глушит?

1 Ответ

0 голосов
/ 13 октября 2018

В Гэтсби есть два типа запросов graphql, о которых мне известно, запросы страниц и статические запросы.

Запросы страниц Они обычно включаются в конец файла компонента в разделеsrc/pages папка.Результаты запроса автоматически передаются в атрибут props.data соответствующего компонента страницы.https://www.gatsbyjs.org/docs/page-query/

Статические запросы Они создаются с использованием компонента StaticQuery, который может быть включен в любой компонент React (или не только в папке src / pages).https://www.gatsbyjs.org/docs/static-query/

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

, например, в src / pages / index.jsx 

export default ({ data }) => (
    <Layout data={data}>
    </Layout>
);

export const query = graphql`
  query LayoutQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
}
...