Gatsby在运行时替换静态查询数据

Question

我是Gatsby&React和我正试图弄清楚如何在预呈现和动态数据的两个世界中做到最好。

查询本身非常适合在构建时获取数据，并将其作为道具传递给渲染每个菜单项的Menu组件。然而，在运行时，我想再次从数据库中提取数据，并让它更新数据，例如，如果有价格变化等。

我知道我可以重建整个项目，但我希望这是一个后备方案。

如何让查询将数据发送到Menu组件，然后在DB调用完成后[再次发送数据？]。

当前未按预期工作的代码：

index.jsx

import React, { useEffect } from "react"
import Layout from "../components/layout"
import SEO from "../components/seo"
import Menu from '../components/menu'
import { graphql } from "gatsby"
import firebase from "gatsby-plugin-firebase"
const IndexPage = (props) => {

useEffect(() => {
// use this hook to make db call and re-render menu component with most up to date data
var db = firebase.firestore();
let docs = []
db.collection(`public/menu/${process.env.restaurantId}`).get().then(val => {
val.forEach(doc => {
docs.push({ node: doc.data() })
});
console.log('docs', docs)
props.data.allMenuItem.edges = docs;  // i have no idea what i'm doing
})

}, [])

return (
<Layout>
<SEO title="Home" />
<Menu menuItems={props.data.allMenuItem.edges}></Menu>
</Layout>
)
}
// use this query for prerendering menu items
export const query = graphql`
query MyQuery   {
allMenuItem {
edges {
node {
available
name
group
}
}
}
}
`;
export default IndexPage

Answer 1

您不应该修改React属性；任何可以更改的值都应该是组件状态的一部分。请参阅是否可以更新组件'；React.js中的道具？

但是，下面的代码应该做到这一点。创建一个状态并将属性值作为默认值。然后在客户端加载数据后对其进行更新。

const IndexPage = props => {
const [menuItems, setMenuItems] = useState(props.data.allMenuItem.edges.map(({node}) => node))
useEffect(() => {
// use this hook to make db call and re-render menu component with most up to date data
let db = firebase.firestore()
db.collection(`public/menu/${process.env.restaurantId}`)
.get()
.then(setMenuItems)
}, [])
return (
<Layout>
<SEO title="Home" />
<Menu menuItems={menuItems}></Menu>
</Layout>
)
}

请注意，我已经切换到使用从firestore获得的数据格式(不带node(，而不是从Gatsby获得的格式，因此如果使用此代码，您需要修改Menu组件，以避免出现额外级别的嵌套(带node(。