Gatsby-source-wordpress-experimental: Getting graphql "cursor" String to be able to client side "load more" content (eg Articles)

[Bbahri]

Hi, thank you for this great library.

I am facing an issue using "gatsby-source-wordpress-experimental".
I use the plugin to generate static page at build time from Wordpress. I just generate a static webpage containing a list of 10 articles.
Then, I want the user to be able to load more articles when scrolling down the page.
To do that, I use Apollo and I need the "cursor" of type String, to update my query passing the "cursor" string to my "after" query parameter.
I think that the "cursor" or "endCursor" should be provided by "gatsby-source-wordpress-experimental" in order to identify the X article I have on the bottom of the page, in order to fetch the next article after this one.

When I go in my GraphiQL panel in my Wordpress Admin, I can query that "cursor", but I can't whith Gatsby at building time.

I did research but I can't find a solution. WPGraphQl doesn't provide an "offset" or "skip" parameter and the "after" parameter they provide need an hash String to identify the post.
Is there something missing in "gatsby-source-wordpress-experimental" to achieve what I want to do ?

My client don't want me to generate static pages with pagination (wich could be a solution). He wants me to lazy load next articles on scroll.

My client side Apollo query for next articles:

const NEXT_POSTS_QUERY = gql`
  query NEXT_POSTS_QUERY($limit: Int!, $cursor: String) {
    posts(first: $limit, after: $cursor) {
      edges {
        node {
          databaseId
          slug
          title
          date
          categories {
            nodes {
              id
              databaseId
              name
              slug
            }
          }
        }
        cursor
      }
    }
  }
`

EDIT: I found this that worked for me as a workaround: https://github.com/valu-digital/wp-graphql-offset-pagination

Thank you for your help.

[TylerBarnes]

Hi @Bbahri ! This is an excellent feature request. We've been talking about writing a plugin that will assist with using live WPGraphQL queries client-side mixed with Gatsby data. This is something we will definitely add at that point. Before that I'm focusing on getting the plugin into a stable place so we can ship v4. Thanks so much for opening this request!

[tinytoolbox]

@TylerBarnes adding a strong +1 to this enhancement

[martin-braun]

@TylerBarnes Thank you for doing this. This is exactly what I need right now. In the meantime, I need to find a work-around. I don't really like to end up building my own nodes. Can I somehow modify a node and let it provide me another value from the WP GraphQL API?

[TylerBarnes]

It's not exactly recommended since WPGraphQL can change it at any time BUT the cursor is just a base64 encoded string that you could also make yourself client-side.

The cursor is arrayconnection:3902 where 3902 is the last post database id in the current page. So you could base64 encode arrayconnection:${lastPostIdInCurrentPage} and send that as the cursor and it should work.

If you do this I would recommend writing a small test in your site where you get a wpgql cursor, base64 decode it and ensure it has this structure. Then you'll know if the structure ever changes in WPGQL.

[martin-braun]

@TylerBarnes Thank you so much, I couldn't be more thankful. I really should've taken more attention and a closer look to those ending equal signs in some of those cursor values.

[TylerBarnes]

You're welcome! Glad to hear that that unblocks you!! :D

[TylerBarnes]

Since there's a workaround and we won't be working on this soon I'm moving this to our internal backlog todo list to clean up GH issues a bit. Thanks to everyone who suggested this. If you feel very strongly about this feature you can add a request to our feature request portal at https://portal.gatsbyjs.com/gatsby-cloud