GraphQL从动态页面获取上下文数据和查询结果

Question

我使用createPage函数动态创建了包含上下文中数据的页面：

groups.forEach(async node => {
const id = node.name

actions.createPage({
path: 'group/'+id,
component: require.resolve(`./src/pages/groups/index.js`),
context: { id: id },
})
})
....

然后我得到了一个带有graphql查询的结果页面：

import * as React from "react"
import { graphql } from 'gatsby'
const GroupPage = ({data}) => {

return (
<main >               
<ul>
{
data.allAgents.edges.map(node => (
<li key={node.node.name}></li>
))
}
</ul>

</main>
)     
}

export const query = graphql`
query($id: String!)  {
allAgents (filter: { group: {eq: $id } } ) {
edges {
node {
id
name
group
}
}
}
}
`
export default GroupPage
export const Head = () => <title>Group</title>

如何访问上下文的页面值？

感谢

Answer 1

您已经公开了一个名为pageContext的道具，它包含在gatsby-node.js中传递的context对象，如您在文档中看到的：

在您的页面和模板上，您可以通过道具访问您的上下文pageContext像这样：

import React from "react"
const Page = ({ pageContext }) => {
return <div>{pageContext.house}</div>
}
export default Page

在您的情况下：

const GroupPage = ({data, pageContext}) => {

console.log("the context is:", pageContext)
return (
<main >               
<ul>
{
data.allAgents.edges.map(node => (
<li key={node.node.name}></li>
))
}
</ul>

</main>
)     
}

注意：如果你想使用pageContext来查询或过滤你的GraphQL查询(在你的情况下是id)，你可以去掉pageContext，因为它的值会自动提升到GraphSQL查询，因此$id: String!会自动使用。如果要显示不同的数据，pageContext非常有用。

注意2：用于创建页面的循环应该是同步的：groups.forEach(node => {...})