Confusion around using index.js

[kpennell]

Hey there - Nice plugin it seems. I'm just struggling to figure it out a bit.

I have a big list of videos on my index.js page currently. Way too many in fact, hence the need for pagination. But I'm struggling a bit to use my index.js as a main page. Perhaps I can't or am just not using this plugin correctly yet.

So within my gatsby-node.js, I do this

 const items = result.data.allItem.edges

    paginate({
      createPage, // The Gatsby `createPage` function
      items: items, // An array of objects
      itemsPerPage: 10, // How many items you want per page
      pathPrefix: '/', // Creates pages like `/blog`, `/blog/2`, etc
      component: path.resolve(`src/pages/index.js`), // Just like `createPage()`
    })

now within index.js, I do this within the query:

  query IndexQuery($skip: Int, $limit: Int) {
    allItem (
      sort: {
        fields: commenttoviewratio,
        order: DESC
      }
      skip: $skip
      limit: $limit
    ) {

Now the main index.js (home page) still has the massive list of videos.

But now /2 /3 etc. work like a charm. They each have 10 items on them. I'm missing something basic right?

How do I make the main index.js first page have only 10 videos? Or should I just create a /videos page and then do videos/1 videos/2 etc... and have index.js link to said videos page?

Somehow I feel I'd run into the same problem...so just a bit stuck.

[kpennell]

itemsPerFirstPage didn't seem to solve it so I must just be using this wrong

[yansusanto]

Glad you have made it that far. For some reasons after following the example to a T, I'm not getting past this error

import { paginate, createPagePerItem } from "gatsby-awesome-pagination ^ SyntaxError: Unexpected token {

[kpennell]

@yansusanto hey man, can you please delete this comment and file a new issue?

[chmac]

@kpennell I think the pages/ directory has special meaning in Gatsby. So I think your pages/index.js will automatically be served at the root of the site. I think you want to use a component that’s in src/templates like the examples rather than src/pages. I’m not 100% sure, typing on my iPad, so just guessing here.

@yansusanto Please open a separate issue as per @kpennell‘s request, it seems your question is not related to this topic. It’s probably also not related to this plugin at all, it’s related to your existing setup and how your imports work, or you have some other issue somewhere in your code.

[decimoseptimo]

This article will give and insight on how to achieve this.

@chmac I think it is safe to close this issue.

[chmac]

Awesome, thanks @decimoseptimo.