Gatsby Graphql Пропустить

Question

Я пытаюсь пролистать данные в компоненте реакции в Gatsby из graphql с помощью кнопки, которая увеличивает значение state.count.

Когда я нажимаю кнопку, state.count увеличивается, но не передается в запрос.

Есть идеи, что я делаю не так?

pageUp=() => {
this.setState({count: this.state.count +2});
let skip=this.state.count
}

render() {
return (
  <StaticQuery
    query={graphql`
      query ListingPageQuery ($skip:Int){
        allMarkdownRemark(
          limit:2
          skip: $skip
          ) 
          {
          ...
        }
      }
    `
    }...

Answer 1

Вы не можете сделать это с Гэтсби. GraphQL происходит только во время сборки, а не на клиенте. Вы хотели бы получить весь контент, а затем использовать JS, чтобы показать / пропустить только то, что вы хотите показать.

Глядя на документацию Gatsby, есть конкретное замечание, что StaticQuery не поддерживает переменные GraphQL, хотя при его просмотре не предлагается другой путь, который делает.

Более того, как сказал Дэвид Мэйз, StaticQuery не поддерживает такие переменные. Это не будет работать и в обычных запросах, потому что такие переменные должны передаваться через контекст. https://next.gatsbyjs.org/docs/creating-and-modifying-pages/

Только если вы передаете его через контекст, оно доступно в pageContext и в качестве переменной в ваших запросах (вы обычно используете это для шаблонов).

Answer 2

setState () является асинхронным.Правильный способ получения состояния - обратный вызов, также используйте параметр prev для ссылки на состояние внутри setState ():

this.setState(prev => ({
    count: prev.count + 2
}), () => {
    // here this.state.count was updated and safe to use
});

Ссылка: https://reactjs.org/docs/react-component.html#setstate

Answer 3

Я вижу две проблемы в этом коде. Во-первых:

pageUp=() => {
    let skip=this.state.count
}

Оператор let приводит к тому, что переменная skip является локальной для этой функции. Из вашего вопроса не очевидно, что заставляет его передаваться в запрос GraphQL, но если это переменная-член или что-то еще, это утверждение shadows , и вы устанавливаете чисто локальную переменную, состояние которой будет быть потерянным.

Второе:

this.setState({count: this.state.count +2});
let skip=this.state.count

Обновления состояний могут быть асинхронными , и документация React особо рекомендует не изменять состояние так, как оно у вас (есть более подходящий шаблон на основе обратного вызова). Другим следствием этого является то, что состояние может фактически не обновляться при переходе на следующую строку, поэтому вы присваиваете count из «старого» состояния переменной skip.

Глядя на документацию Gatsby, есть конкретное замечание, что StaticQuery не поддерживает переменные GraphQL , хотя при его просмотре не предлагается другой путь, который делает. (Каждый пример, который показывает потенциально разбитые на страницы данные, показывает только первую страницу.)