Question

这是我的代码：

class Login extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      username: ``,
      password: ``,
    }
      ------------some lines of code
  }
export default Login

//////////////////////////////////// GraphQL ///////////////////////////////////

export const pageQuery = graphql`
query{
  users: allMysqlUsers{
    edges{
      node{
        name
        password
      }
    }
  }
}
`

我不能通过以下方式在此处获取数据：

const myData = this.props.data.users

如果是，那么我在哪里错了？如果不是，那为什么呢？从db获取和比较数据的方法应该是什么？另外，我正在跟踪this doc来使用带有gatsby的MySQL进行用户身份验证。还有其他建议/有用的文档吗？谢谢。

Answer 1

免责声明：您将只能在顶级组件（页面）中使用pageQuery。如果<Login>是一个组件（似乎是），则需要使用staticQuery。您可以查看更多信息：https://www.gatsbyjs.org/docs/static-vs-normal-queries/。

如果是组件：

import React from "react"
import { useStaticQuery, graphql } from "gatsby"

export default function Login() {
  const data = useStaticQuery(graphql`
    query{
      users: allMysqlUsers{
        edges{
          node{
            name
            password
          }
        }
      }
    }
  `)
  return (
    <div>
      <h1>Hi, {data.users.edges[0].node.name}</h1>
    </div>
  )
}

注意：此方案基于功能组件而不是有状态组件。两种方法都相同。但是，由于使用React钩子，我建议使用无状态（功能性）组件。在这种情况下，您将可以使用useStaticQuery hook。

如果是页面（不太可能）：

您的查询是正确的，但是，常量myData缺少一些嵌套对象。您的name和password位于里面：

const myData = this.props.data.users.edges[0].node

当然，这仅适用于一位用户。如果您有大量用户，则应遍历edges：

{this.props.data.users.edges.map(node => <p key={node.name}>{node.name}, {node.password}</p>)}

无法从Gatbsy中的graphQL获取数据

1 个答案:

如果是组件：

如果是页面（不太可能）：