Gatsbyjs - Как получить данные GraphQL с помощью Material UI Lib

Я новичок в Frontend Dev. Изучение Gatsbyjs с помощью библиотеки UI материалов. Я пытаюсь создать новую страницу с материализацией, запущенной gatsby @

Material UI Gatsby Starter

Теперь, когда я пытаюсь создать новую страницу с помощью GraphQL и распечатать данные, я вижу ошибку. Не уверен, как отправить данные из graphQl

Это код моей новой страницы. В основном я пытаюсь распечатать данные, полученные из GraphQL, на странице.

import React, { Component } from 'react'
import Button from '@material-ui/core/Button';
import { withStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';


const styles = {

  };

const page2 = (props,{data}) => {
  const { classes } = props;

    return (
      <div>
                Hello  {data.site.siteMetadata.title}

  <Button className={classes.button}>Default</Button>

  </div>
)

}

export default withStyles(styles)(page2);

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

Ошибка: :: TypeError: невозможно прочитать свойство "сайт" неопределенного значения.

Запрос отлично работает при запуске в GraphiQL

{
  "data": {
    "site": {
      "siteMetadata": {
        "title": "Gatsby Default Starter"
      }
    }
  }
}

Прикрепление снимка экрана введите здесь описание изображения


reactjs javascript material-ui gatsby
person 1nullpointer    schedule 19.06.2018    source источник
comment
У вас могла быть ошибка синтаксиса при загрузке gatsby develop, которая сейчас исправлена. Попробуйте перезапустить gatsby develop. Если это не сработает, попробуйте остановить его, удалите .cache и начните снова. Следите за выводом терминала на предмет ошибок или предупреждений.   -  person coreyward    schedule 19.06.2018
comment
Пробовал повторно запустить npm install. Та же ошибка. Где мне найти файл .cache? IDE GraphQl обнаруживает изменение. Это просто не отражается на методе Render. Не знаю почему. У меня есть ошибка в синтаксисе Hello {data.site.siteMetadata.title}   -  person 1nullpointer    schedule 19.06.2018
comment
Хорошо, переустановка зависимостей здесь не поможет. Гэтсби создает папку .cache в корне вашего проекта. Вы можете запустить rm -rf .cache из корня вашего проекта (т.е. откуда вы запускаете gatsby develop), если вы работаете на Mac.   -  person coreyward    schedule 19.06.2018

Ответы (1)


arrow_upward
2
arrow_downward

Похоже, вы неправильно деструктурируете props, попробуйте следующее:

const page2 = ({ data, classes }) => {
  return (
    <div>
      Hello {data.site.siteMetadata.title}
      <Button className={classes.button}>Default</Button>
    </div>
  );
};
person Fabian Schultz    schedule 19.06.2018
comment
Круто, это работает! Есть вопрос, почему не работает, когда я получаю его как реквизит и назначаю классам в отдельном вопросе? const page2 = ({props, data}) = ›{const {classes} = props; - person 1nullpointer; 19.06.2018
comment
Потому что это пытается получить свойство props для this.props, которое не определено. Но вы можете использовать спред, например ({ data, ...props }). - person Fabian Schultz; 19.06.2018