Gatsby Graphql Skip

Question

I am trying to page through data in a react component in Gatsby from graphql via a button that increments state.count.

When I click the button the state.count is incremented but it is not passed to the query.

Any ideas what I am doing wrong?

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

I see two issues in this code. First:

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

The let statement causes the skip variable to be local to this function. It's not obvious from your question what causes it to be passed on to the GraphQL query, but if it's a member variable or something else, this statement shadows it and you're setting a purely local variable whose state will be lost.

Second:

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

State updates may be asynchronous , and the React documentation specifically advises against changing state the way you have it (there is a callback-based pattern that's more appropriate). The other consequence of this is that the state may not have actually updated when you get to the next line, so you're assigning count from the "old" state to the skip variable.

Looking at the Gatsby documentation, there is a specific note that StaticQuery does not support GraphQL variables , though browsing it doesn't suggest another path that does. (Every single example that shows potentially paginated data only shows the first page.)

Answer 2

You can't do that with Gatsby. GraphQL only happens at build-time not on the client. You'd want to grab all the content and then use JS to only show/skip what you want to show.

Looking at the Gatsby documentation, there is a specific note that StaticQuery does not support GraphQL variables, though browsing it doesn't suggest another path that does.

Moreover as David Maze said the StaticQuery doesn't support such variables. This wouldn't work in normal queries either because such variables need to be passed in via context. https://next.gatsbyjs.org/docs/creating-and-modifying-pages/

Only if you pass it via context it's available in pageContext and as a variable in your queries (you normally use that for templates).

Answer 3

The setState() is asynchronous. The right way to capture the state is in a callback, also use the prev parameter to reference state inside a setState() :

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

Reference: https://reactjs.org/docs/react-component.html#setstate