Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pagination/tags in 1.0 #785

Closed
paramsen opened this issue Apr 10, 2017 · 11 comments
Closed

Pagination/tags in 1.0 #785

paramsen opened this issue Apr 10, 2017 · 11 comments

Comments

@paramsen
Copy link

I've browsed around the issues and roadmap for a while looking for more info about pagination and tags (and tag collection pages). This seems to be a feature that has been rolled out in 1.0, but where can I find a concrete demo and sample code for it.

Do I need to migrate to GraphQL from the old file-hierarchy -based structure to get access to these features?
Are there any migration guides from 0.* to 1.0?

As a sidenote I think this project needs a more indepth readme/documentation, the current readme is more of a sales pitch and doesn't really cover the features of 1.0 from what I've read. I think GraphQL has a pretty good documentation, check it out.

@KyleAMathews
Copy link
Contributor

Hey! Thanks for stopping by. Pagination and tags are indeed supported in 1.0. The best place to get started on understanding 1.0 is this issue and its subissues: #419

There's not a migration guide yet as 1.0 is still a moving target. My plan is that we'll publish an upgrade guide along with the first beta as that'll signify APIs etc are mostly stabilized. The above 1.0 issue has several sites which are kept up-to-date with changes that you can check out.

In depth documentation is also in progress. Check out https://www.gatsbyjs.org for the docs-in-progress. Any help you can lend there is appreciated!

You might also be interested in this case study on an example site built with 1.0 https://www.gatsbyjs.org/blog/gatsbygram-case-study/

@paramsen
Copy link
Author

Hi! Thanks for your response, I'll check out the links for further info about this. The issues (issues tab) are a little confusing for newcomers like me since gatsby's in the middle of a overhaul by the looks of it.

Thanks for developing this awesome project!

@chiedo
Copy link

chiedo commented Jul 7, 2017

Congrats on the launch!

Any resource on how to incorporate pagination in a blog archive without having to query all the data with GraphQL? I've implemented it but I'm querying every blog post instead of just getting the blog posts I need.

@KyleAMathews
Copy link
Contributor

KyleAMathews commented Jul 7, 2017 via email

@chiedo
Copy link

chiedo commented Jul 8, 2017

Cool @KyleAMathews

I actually tried skip and limit but couldn't get graphql to accept variables for the page number. I was probably doing something wrong.

I could only use static queries in the components so couldn't tell the query to skip 1 for page 1, skip 2 for page 2 etc.

I'll keep looking though! I'll see what I see in the codebase. :)

@chiedo
Copy link

chiedo commented Jul 8, 2017

As a follow up to this for record keeping purposes:

  • I was able to easily support paging and used a similar approach as shown in gatsbygram
  • I was not able to utilize pagination on the graphql query my page was using to prevent grabbing all the data at once. This may not matter though.
  • If one did want to do pagination that was more scalable by utilizing pagination on the query also with skip and limit (may not matter at all in practice), I'm led to believe that one would need to create each blog archive page (1,2,3 etc) by using gatsby-node.js and hooking into one of the functions. ... maybe createPages? My attempts to use skip and limit and have them read data from my props did not work as I was not able to interpolate any strings into the query (maybe due to limitations, maybe due to my lack of knowledge).

@KyleAMathews
Copy link
Contributor

@chiedo yeah you can only pass graphql variables when creating pages https://www.gatsbyjs.org/docs/bound-action-creators/#createPage

@theiliad
Copy link
Contributor

Any updates on this? Some sort of tutorial to get started with pagination that wouldn't grab everything at once. An approach where you'll just get pages automatically generated (/blog/page-2, /blog/page-3)?

@theiliad
Copy link
Contributor

Even some sample code on doing pagination will work for me

@chiedo
Copy link

chiedo commented Aug 22, 2017

That's not trivial @theiliad. You'd need to do it with a gatsby-node createPage script.

If you need pagination, without those pages getting automatically generated though, this is a good starter https://github.com/gatsbyjs/gatsby/blob/master/examples/gatsbygram/src/pages/index.js

@theiliad
Copy link
Contributor

theiliad commented Aug 22, 2017

Cool, it'd be cool to make a plugin for that, I'll look into it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants