Reactjs Gatsby在运行时替换静态查询数据
我是盖茨比&React公司的新员工,我正试图找出如何充分利用预渲染和动态数据这两个世界 查询本身非常适合在构建时获取数据,并将其作为道具传递给呈现每个菜单项的菜单组件。但是,在运行时,我希望再次从数据库中提取数据,并让它更新数据,例如,如果有价格变化,等等 我知道我可以重建整个项目,但我希望这是一个后备方案 如何使查询将数据发送到菜单组件,然后在DB调用完成时也发送[再次发送数据?] 当前未按预期工作的代码: index.jsxReactjs Gatsby在运行时替换静态查询数据,reactjs,gatsby,Reactjs,Gatsby,我是盖茨比&React公司的新员工,我正试图找出如何充分利用预渲染和动态数据这两个世界 查询本身非常适合在构建时获取数据,并将其作为道具传递给呈现每个菜单项的菜单组件。但是,在运行时,我希望再次从数据库中提取数据,并让它更新数据,例如,如果有价格变化,等等 我知道我可以重建整个项目,但我希望这是一个后备方案 如何使查询将数据发送到菜单组件,然后在DB调用完成时也发送[再次发送数据?] 当前未按预期工作的代码: index.jsx import React, { useEffect } from
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
import React,{useffect}来自“React”
从“./组件/布局”导入布局
从“./组件/SEO”导入SEO
从“../components/Menu”导入菜单
从“盖茨比”导入{graphql}
从“盖茨比插件firebase”导入firebase
常量索引扩展=(道具)=>{
useffect(()=>{
//使用此钩子调用db并使用最新数据重新呈现菜单组件
var db=firebase.firestore();
让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;//我不知道我在做什么
})
}, [])
返回(
)
}
//对预渲染菜单项使用此查询
export const query=graphql`
查询我的查询{
allMenuItem{
边缘{
节点{
可获得的
名称
组
}
}
}
}
`;
导出默认索引扩展
您不应该修改React属性;任何可以更改的值都应该是组件状态的一部分。看
但是,下面的代码应该可以做到这一点。创建一个状态并将属性值作为默认值提供给它。然后在客户端加载数据后更新它
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>
)
}
const IndexPage=props=>{
const[menuItems,setMenuItems]=useState(props.data.allMenuItem.edges.map(({node}=>node))
useffect(()=>{
//使用此钩子调用db并使用最新数据重新呈现菜单组件
设db=firebase.firestore()
db.collection(`public/menu/${process.env.restaurantId}`)
.get()
.然后(设置菜单项)
}, [])
返回(
)
}
请注意,我已经切换到使用您从firestore获得的数据格式(不带
节点
),而不是从Gatsby获得的数据格式,因此如果您使用此代码,您需要修改菜单
组件,以避免额外的嵌套级别(带节点
)。谢谢,这是一个非常干净的解决方案!我尝试实现它,不断得到一个无限循环,并在useffect中实现空数组。