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

【问题标题】：Gatsbyjs - How to pull in GraphQL data with Material UI LibGatsbyjs - 如何使用 Material UI Lib 提取 GraphQL 数据
【发布时间】：2018-11-28 14:27:21
【问题描述】：

我是前端开发新手。使用 Material UI 库学习 Gatsbyjs。我正在尝试使用 materialui 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"
      }
    }
  }
}

附加截图

【问题讨论】：

您在启动 gatsby develop 时可能遇到语法错误，现在已修复。尝试重新启动gatsby develop。如果这不起作用，请尝试停止它，删除.cache 并重新开始。观察终端输出是否有任何错误或警告。
尝试重新运行 npm install 。同样的错误。我在哪里可以找到 .cache 文件？ GraphQl IDE 正在检测更改。它只是没有反映 Render 方法。不知道为什么。我对 Hello {data.site.siteMetadata.title} 的语法有任何错误吗
好的，在这里重新安装依赖项对您没有帮助。 Gatsby 在您的项目根目录中创建 .cache 文件夹。如果您使用的是 Mac，则可以从项目根目录（即运行 gatsby develop 的位置）运行 rm -rf .cache。

标签： javascript reactjs material-ui gatsby

【解决方案1】：

好像你没有正确解构props，试试这个：

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

【讨论】：

酷，行得通！有一个问题，为什么当我将它作为道具检索并在单独的问题中分配给类时它不起作用？ const page2 = ({props,data}) => { const { classes } = props;
因为它试图获取this.props 的props 属性，该属性未定义。但是你可以做的是使用像({ data, ...props })这样的传播。