Gatsby Replace Stati c Данные запроса во время выполнения

Question

Я новичок в Gatsby & React, и я пытаюсь понять, как лучше всего использовать оба мира предварительной визуализации и динамической обработки. c данные.

Один только запрос отлично подходит для получения data во время сборки и передача их в качестве опоры компоненту Menu, в котором отображается каждый пункт меню. Однако во время выполнения я хотел бы снова извлечь данные из БД и обновить данные, например, если было изменение цены, et c.

Я знаю, что могу просто перестроить весь проект, но я хотел бы иметь это в качестве запасного варианта.

Как я могу заставить запрос отправлять данные в компонент меню, а затем также [отправить данные снова?], когда вызов БД выполнен .

Код, который в настоящее время не работает должным образом:

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), если вы используете этот код.