load more in sitemetadata

gatsby-config.js

@@ -29,6 +29,12 @@ module.exports = {
       telegram: 'https://t.me/devthread',
       twitter: 'https://twitter.com/devthread',
       yadzen: 'https://zen.yandex.ru/'
+    },
+    options: {
+      articles: {
+        onPage: 6,
+        onLoadMore: 2
+      }
     }
   },
   plugins: [

src/components/Articles/Articles.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types'
+import useSiteMetadataQuery from '../../hooks/useSiteMetadataQuery'
 import ArticleCard from './ArticleCard/ArticleCard'
 import Newsletter from '../Newsletter/Newsletter'
 
 const Articles = ({ data: { edges }, limit = 6, setLimit = () => null }) => {
+  const { siteMetadata: { options: { articles: { onLoadMore } } } } = useSiteMetadataQuery()
   return (
     <>
       <div className="articles">
@@ -21,7 +23,7 @@ const Articles = ({ data: { edges }, limit = 6, setLimit = () => null }) => {
         <div className="articles-loadMore">
           {edges.length === limit || edges.length <= limit 
             ? null
-            : <button className='btn-loadMore' onClick={() => setLimit(limit + 2)}>Загрузить еще&nbsp;&nbsp;<span role='img' aria-label='load more'>👇</span></button>
+            : <button className='btn-loadMore' onClick={() => setLimit(limit + onLoadMore)}>Загрузить еще&nbsp;&nbsp;<span role='img' aria-label='load more'>👇</span></button>
           }
         </div>
       </div>

src/hooks/useSiteMetadataQuery.js

@@ -21,6 +21,12 @@ const useSiteMetadata = () => {
             twitter
             yadzen
           }
+          options {
+            articles {
+              onPage
+              onLoadMore
+            }
+          }
         }
       }
     }

src/pages/articles.js

@@ -5,6 +5,7 @@ import { graphql } from 'gatsby'
 import { useLocation } from '@reach/router'
 import * as queryString from 'query-string'
 import useCategoriesQuery from '../hooks/useCategoriesQuery'
+import useSiteMetadataQuery from '../hooks/useSiteMetadataQuery'
 
 import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
@@ -18,9 +19,10 @@ import SearchIcon from '../images/search-icon.svg'
 
 const ArticlesPage = ({ data: { allMarkdownRemark: edges }, }) => {
   const { categories } = useCategoriesQuery()
+  const { siteMetadata: { options: { articles: { onPage } } } } = useSiteMetadataQuery()
   const { search } = useLocation()
   
-  let [limit, setLimit] = React.useState(6)
+  let [limit, setLimit] = React.useState(onPage)
   const [filtredArticles, setFiltredArticles] = React.useState([])
   const [query, setQuery] = React.useState(queryString.parse(search).search || '')
   

src/templates/categoryTemplate.js

@@ -13,9 +13,9 @@ import Offers from '../components/Offers/Offers'
 
 const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } }) => {
   const { categories } = useCategoriesQuery()
-  const { siteMetadata: { siteUrl } } = useSiteMetadataQuery()
+  const { siteMetadata: { siteUrl, options: { articles: { onPage } } } } = useSiteMetadataQuery()
 
-  let [limit, setLimit] = React.useState(6)
+  let [limit, setLimit] = React.useState(onPage)
 
   return (
     <Layout>

src/templates/tagTemplate.js

@@ -13,9 +13,9 @@ import Offers from '../components/Offers/Offers'
 
 const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } }) => {
   const { categories } = useCategoriesQuery()
-  const { siteMetadata: { siteUrl } } = useSiteMetadataQuery()
+  const { siteMetadata: { siteUrl, options: { articles: { onPage } } } } = useSiteMetadataQuery()
   
-  let [limit, setLimit] = React.useState(6)
+  let [limit, setLimit] = React.useState(onPage)
 
   return (
     <Layout>