Pagination error on Gatsby JS category and tag pages - gatsby-plugin

Question

I use the awesome paginate plugin for Gatsby to do pagination on archive pages on the site. The plugin connects to the gatsby-node file.js is called there with the help of such code
paginate({
createPage,
items: allMdx.edges,
itemsPerPage: 1,
pathPrefix: '/work',
component: path.resolve('src/templates/work.js')
});
Pagination works great on blog and works pages. I created these pages using the Gatsby Route API, without using the createPage function in gatsby-node. Pagination works great on blog and works pages. I created these pages using the Gatsby Route API, without using the createPage function in gatsby-node.js . But on the pages of tags and categories, I can't enable pagination. These pages were created using createPage. Below I present the code of my gatsby-node.js
const _ = require("lodash")
//const readingTime = require("reading-time")
const { paginate } = require('gatsby-awesome-pagination')
const path = require("path")
const { transliterate } = require('./src/functions/transletter')
const { createFilePath } = require('gatsby-source-filesystem')
/* Create category page */
function dedupeCategories(allMdx) {
const uniqueCategories = new Set()
// Iterate over all articles
allMdx.edges.forEach(({ node }) => {
// Iterate over each category in an article
node.frontmatter.categories.forEach(category => {
uniqueCategories.add(category)
})
})
// Create new array with duplicates removed
return Array.from(uniqueCategories)
}
/* Create tag page */
function dedupeTags(allMdx) {
const uniqueTags = new Set()
// Iterate over all articles
allMdx.edges.forEach(({ node }) => {
// Iterate over each category in an article
node.frontmatter.tags.forEach(tag => {
uniqueTags.add(tag)
})
})
// Create new array with duplicates removed
return Array.from(uniqueTags)
}
exports.createPages = async ({ graphql, actions, reporter }) => {
const { createPage } = actions
// Query markdown files including data from frontmatter
const {
data: { allMdx },
} = await graphql(`
query {
allMdx (filter: {frontmatter: {type: {in: "blog"}}}){
edges {
node {
id
frontmatter {
categories
tags
slug
}
fields {
slug
}
}
}
}
}
`)
// Create array of every category without duplicates
const dedupedCategories = dedupeCategories(allMdx)
// Iterate over categories and create page for each
dedupedCategories.forEach(category => {
reporter.info(`Creating page: blog/category/${category}`)
createPage({
path: `blog/category/${_.kebabCase(transliterate(category))}`,
component: require.resolve("./src/templates/categories.js"),
// Create props for our CategoryList.js component
context: {
category,
// Create an array of ids of articles in this category
ids: allMdx.edges
.filter(({ node }) => {
return node.frontmatter.categories.includes(category)
})
.map(({node}) => node.id),
},
})
})
// Create array of every category without duplicates
const dedupedTags = dedupeTags(allMdx)
// Iterate over categories and create page for each
dedupedTags.forEach(tag => {
reporter.info(`Creating page: blog/tag/${tag}`)
createPage({
path: `blog/tag/${_.kebabCase(transliterate(tag))}`,
component: require.resolve("./src/templates/tags.js"),
// Create props for our CategoryList.js component
context: {
tag,
// Create an array of ids of articles in this category
ids: allMdx.edges
.filter(({ node }) => {
return node.frontmatter.tags.includes(tag)
})
.map(({node}) => node.id),
},
})
})
/* It's creating a new page for each post. */
paginate({
createPage,
items: allMdx.edges,
itemsPerPage: 1,
pathPrefix: '/blog',
component: path.resolve('src/templates/blog.js')
});
/* It's creating a new page for each post. */
paginate({
createPage,
items: allMdx.edges,
itemsPerPage: 1,
pathPrefix: '/work',
component: path.resolve('src/templates/work.js')
});
/* It's creating a new page for each post. */
paginate({
createPage,
items: allMdx.edges,
itemsPerPage: 1,
pathPrefix: '/blog/category',
component: path.resolve('src/templates/categories.js')
});
}
/* Creating a slug for each post. */
exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions;
if (node.internal.type === `Mdx`) {
const value = createFilePath({ node, getNode });
createNodeField({
name: 'slug',
node,
value,
});
}
};
/* It's creating a new field in the GraphQL schema called `relatedPosts` that returns an array of Mdx
nodes. */
exports.createResolvers = ({ createResolvers }) => {
const resolvers = {
Mdx: {
relatedPosts: {
type: ['Mdx'],
resolve: (source, args, context, info) => {
return context.nodeModel.runQuery({
query: {
filter: {
id: {
ne: source.id,
},
frontmatter: {
// type: {
// ne: source.frontmatter.type === `work`,
// },
tags: {
in: source.frontmatter.tags,
},
},
},
},
type: 'Mdx',
})
},
},
},
}
createResolvers(resolvers)
}
And this is the template code of my category src/templates/category.js
import React from "react"
import { Link, graphql } from "gatsby"
import Layout from '../components/layout'
import Seo from '../components/seo'
import Pager from '../components/pagination'
const CategoryList = ({ pageContext: { category }, data: { allMdx }, pageContext }) =>
(
<Layout pageTitle={category}>
{
allMdx.edges.map(({ node }) => {
return (
<article key={node.id}>
<h2>
<Link to={`/blog${node.fields.slug}`}>
{node.frontmatter.title}
</Link>
</h2>
<p>Posted: {node.frontmatter.date}</p>
<p>{node.excerpt}</p>
</article>
)
})
}
<Pager pageContext={pageContext} />
</Layout>
)
export const query = graphql`
query CategoryListQuery($ids: [String]!, $limit: Int!, $skip: Int!) {
allMdx (filter: { id: { in: $ids }, frontmatter: {type: {in: "blog"}}}, limit: $limit,
skip: $skip) {
edges {
node {
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
}
fields {
slug
}
id
excerpt
}
}
}
}
`
export const Head = ({ pageContext }) => (
<Seo
title={pageContext.category}
description={`Статьи из категории ${pageContext.category}`}
/>
)
export default CategoryList
The Pager component looks like this
import React from 'react';
import { Link } from 'gatsby';
const Pager = ({ pageContext }) => {
const { previousPagePath, nextPagePath } = pageContext;
return (
<nav style={{ display: 'flex', justifyContent: 'space-between' }}>
<div>
{previousPagePath && (
<Link to={previousPagePath}>
<button>← Newer Posts</button>
</Link>
)}
</div>
<div style={{ justifySelf: 'flex-end' }}>
{nextPagePath && (
<Link to={nextPagePath}>
<button>Older Posts →</button>
</Link>
)}
</div>
</nav>
);
};
export default Pager;
This is errors
ERROR #85920 GRAPHQL
There was an error in your GraphQL query:
Variable "$limit" of required type "Int!" was not provided.
> 1 | query CategoryListQuery($ids: [String]!, $limit: Int!, $skip: Int!) {
| ^
2 | allMdx(
3 | filter: {id: {in: $ids}, frontmatter: {type: {in: "blog"}}}
4 | limit: $limit
5 | skip: $skip
6 | ) {
7 | edges {
8 | node {
9 | frontmatter {
10 | title
11 | date(formatString: "MMMM DD, YYYY")
File path: C:/gatsby/schtml/src/templates/categories.js
Url path: /blog/category/gatsby-js
Plugin: none
Suggestion 1:
If you're not using a page query but a useStaticQuery / StaticQuery you see this error because they currently don't support
variables. To learn more about the limitations of useStaticQuery / StaticQuery, please visit these docs:
https://www.gatsbyjs.com/docs/how-to/querying-data/use-static-query/
https://www.gatsbyjs.com/docs/how-to/querying-data/static-query/
Suggestion 2:
You might have a typo in the variable name "$limit" or you didn't provide the variable via context to this page query. Have a look
at the docs to learn how to add data to context:
https://www.gatsbyjs.com/docs/how-to/querying-data/page-query#how-to-add-query-variables-to-a-page-query
ERROR #85920 GRAPHQL
There was an error in your GraphQL query:
Variable "$skip" of required type "Int!" was not provided.
> 1 | query CategoryListQuery($ids: [String]!, $limit: Int!, $skip: Int!) {
| ^
2 | allMdx(
3 | filter: {id: {in: $ids}, frontmatter: {type: {in: "blog"}}}
4 | limit: $limit
5 | skip: $skip
6 | ) {
7 | edges {
8 | node {
9 | frontmatter {
10 | title
11 | date(formatString: "MMMM DD, YYYY")
File path: C:/gatsby/schtml/src/templates/categories.js
Url path: /blog/category/gatsby-js
Plugin: none
Suggestion 1:
If you're not using a page query but a useStaticQuery / StaticQuery you see this error because they currently don't support
variables. To learn more about the limitations of useStaticQuery / StaticQuery, please visit these docs:
https://www.gatsbyjs.com/docs/how-to/querying-data/use-static-query/
https://www.gatsbyjs.com/docs/how-to/querying-data/static-query/
Suggestion 2:
You might have a typo in the variable name "$skip" or you didn't provide the variable via context to this page query. Have a look at the docs to learn how to add data to context:
https://www.gatsbyjs.com/docs/how-to/querying-data/page-query#how-to-add-query-variables-to-a-page-query
ERROR #85920 GRAPHQL
There was an error in your GraphQL query:
Variable "$limit" of required type "Int!" was not provided.
> 1 | query CategoryListQuery($ids: [String]!, $limit: Int!, $skip: Int!) {
| ^
2 | allMdx(
3 | filter: {id: {in: $ids}, frontmatter: {type: {in: "blog"}}}
4 | limit: $limit
5 | skip: $skip
6 | ) {
7 | edges {
8 | node {
9 | frontmatter {
10 | title
11 | date(formatString: "MMMM DD, YYYY")
File path: C:/gatsby/schtml/src/templates/categories.js
Url path: /blog/category/gatsby-develop
Plugin: none
Suggestion 1:
If you're not using a page query but a useStaticQuery / StaticQuery you see this error because they currently don't support
variables. To learn more about the limitations of useStaticQuery / StaticQuery, please visit these docs:
https://www.gatsbyjs.com/docs/how-to/querying-data/use-static-query/
https://www.gatsbyjs.com/docs/how-to/querying-data/static-query/
Suggestion 2:
You might have a typo in the variable name "$limit" or you didn't provide the variable via context to this page query. Have a look
at the docs to learn how to add data to context:
https://www.gatsbyjs.com/docs/how-to/querying-data/page-query#how-to-add-query-variables-to-a-page-query
ERROR #85920 GRAPHQL
There was an error in your GraphQL query:
Variable "$skip" of required type "Int!" was not provided.
> 1 | query CategoryListQuery($ids: [String]!, $limit: Int!, $skip: Int!) {
| ^
2 | allMdx(
3 | filter: {id: {in: $ids}, frontmatter: {type: {in: "blog"}}}
4 | limit: $limit
5 | skip: $skip
6 | ) {
7 | edges {
8 | node {
9 | frontmatter {
10 | title
11 | date(formatString: "MMMM DD, YYYY")
File path: C:/gatsby/schtml/src/templates/categories.js
Url path: /blog/category/gatsby-develop
Plugin: none
Suggestion 1:
If you're not using a page query but a useStaticQuery / StaticQuery you see this error because they currently don't support
variables. To learn more about the limitations of useStaticQuery / StaticQuery, please visit these docs:
https://www.gatsbyjs.com/docs/how-to/querying-data/use-static-query/
https://www.gatsbyjs.com/docs/how-to/querying-data/static-query/
Suggestion 2:
You might have a typo in the variable name "$skip" or you didn't provide the variable via context to this page query. Have a look at the docs to learn how to add data to context:
https://www.gatsbyjs.com/docs/how-to/querying-data/page-query#how-to-add-query-variables-to-a-page-query
success Writing page-data.json files to public directory - 0.044s - 2/2 45.97/s
success run page queries - 0.422s - 3/3 7.12/s
success Writing page-data.json files to public directory - 0.059s - 3/3 50.83/s