Can't load more than 20 items

[necheporenko]

As you can see on my screenshot, I have 46 items, but on edges I see only 20. How to increase this limit?

[Giulico]

It returns 20 items by design. You need to use pagination, take a look here: Paginate your results

[necheporenko]

So, is it possible to get all items on one page? Or I should create something like this:
/page-1 / (0-20)
/page-2 / (20-40)
/page-3 / (40-50)

[necheporenko]

I have worked with Netlify CMS in the past and have not seen this limitation on GraphQL.

[Giulico]

As far as I can see you have few choises:

1. Create different pages, as you said
2. Use client API to fetch the next pages with ajax (those items will not be rendered on the static page)
3. Use gatsby-node.js to build an array that contains all your documents (retrieved with a pagination loop) and pass it down to the page through pageContext.

[necheporenko]

@Giulico, got it, thanks.

[andreasrippl]

@necheporenko Did you manage it and if yes could you share your approach?

[necheporenko]

@andreasrippl, yes, I've used the client API.

  useEffect(() => {
    let collectedData;
    const loadMoreProjects = async (res) => {
      const response = await client.query({
        query: gql`
          query($lang: String!, $after: String!) {
            allProjects(lang: $lang, after: $after) {
              edges {
                node {
                  title
                  description
                  image
                  logo
                  _meta {
                    id
                  }
                }
              }
              pageInfo {
                hasNextPage
                endCursor
              }
            }
          }
        `,
        variables: { lang: pageContext.lang, after: res.pageInfo.endCursor },
      });
      collectedData = [...prismicProjects, ...response.data.allProjects.edges];

      if (response.data.allProjects.pageInfo.hasNextPage) {
        loadMoreProjects(response.data.allProjects);
      } else {
        setPrismicProjects(collectedData);
        return Promise.resolve();
      }
    };

    if (PrismicDataAllProjects.pageInfo.hasNextPage) {
      loadMoreProjects(PrismicDataAllProjects);
    }
  }, []);