Gatsbyjs - 如何使用 Material UI Lib 提取 GraphQL 数据

Question

我是前端开发新手。使用 Material UI 库学习 Gatsbyjs。我正在尝试使用 materialui gatsby started @

创建一个新页面

现在，当我尝试使用 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
      }
    }
  }
`

错误是:: 类型错误：无法读取未定义的属性 'site'

在 GraphiQL运行中查询运行没问题

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

附上截图

Answer 1

似乎你没有正确解构 props，试试这个：

const page2 = ({ data, classes }) => {
  return (
    <div>
      Hello {data.site.siteMetadata.title}
      <Button className={classes.button}>Default</Button>
    </div>
  );
};

Gatsbyjs - 如何使用 Material UI Lib 提取 GraphQL 数据

Gatsbyjs - How to pull in GraphQL data with Material UI Lib

javascript

reactjs

material-ui

gatsby