title: Passing context from gatsby-node.js into react components (pagination/navigation link troubleshooting)
body: <p>I'm currently building a website for a client with Gatsby and Wordpress as a CMS. All has gone well so far but I am struggling with creating the "previous page" and "next page" links while finalizing pagination for the site's blog. I think I know what direction I'm heading in next, but I am struggling with passing items through context in my gatsby-node.js file.</p>
  
  <p>Relevant parts of gatsby-node.js:</p>
  
  <pre><code>
  const path = require('path')
  
  
  module.exports.createPages = async ({ graphql, actions }) =&gt; {
  
    const { createPage } = actions
    const blogPostTemplate = path.resolve('./src/templates/blog-post.js')
    const blogCategoryFilter = path.resolve('./src/templates/blog-filter-category.js')
    const blogArchiveFilter = path.resolve('./src/templates/blog-filter-archive.js')
  
    const blogList = await graphql(`
  query {
    allWordpressPost {
      edges {
        node {
          slug
          date(formatString:"YYYY-MM")
        }
      }
    }
  }
  `);
  
    const categories = await graphql(`
  query {
    allWordpressCategory {
      edges {
        node {
          slug
        }
      }
    }
  }
  `);
  
    const posts = blogList.data.allWordpressPost.edges;
  
  categories.data.allWordpressCategory.edges.forEach((edge) =&gt; {
      const slug = edge.node.slug
      const blogPostsCount = posts.length
      const blogPostsPerPaginatedPage = 3
      const paginatedPagesCount = Math.ceil(blogPostsCount / blogPostsPerPaginatedPage)
      for (let i = 0; i &lt;= paginatedPagesCount; i++) {
        createPage({
          component: blogCategoryFilter,
          path: i === 0 ? `/blog/category/${slug}` : `/blog/category/${slug}/${i + 1}`,
          context: {
            slug: slug,
            limit: blogPostsPerPaginatedPage,
            skip: i * blogPostsPerPaginatedPage,
            paginatedPagesCount,
            currentPage: i + 1,
          }
        })
      }
    })
  
  </code></pre>
  
  <p>My template file:</p>
  
  <pre><code>import React from 'react'
  import { graphql, Link } from 'gatsby'
  
  import Layout from '../components/layout'
  import BlogNav from '../components/blognav'
  
  import blogStyles from '../components/modules/blog.module.css'
  
  export const query = graphql`
    query($slug: String!, $limit: Int!, $skip: Int!) {
      allWordpressPost (filter: {categories: {elemMatch: {slug: { eq: $slug }}}} limit: $limit skip: $skip) {
        edges {
          node {
            title
            slug
            content
            date(formatString: "MMMM DD, YYYY")
          }
        }
      }
      allWordpressCategory (filter: {slug: {eq: $slug}}) {
        edges {
          node {
            slug
          }
        }
      }
    }
  `
  
  
  export default ({ data }) =&gt; {
  
  
    return (
      &lt;Layout&gt;
        &lt;div className={blogStyles.blog_container}&gt;
          &lt;div className={blogStyles.blogContent_container}&gt;
            &lt;ol&gt;
              {data.allWordpressPost.edges.map((edge) =&gt; {
                return (
                  &lt;div className={blogStyles.blogPost_container}&gt;
                    &lt;li className={blogStyles.blog_list}&gt;
                      &lt;h2&gt;&lt;Link to={`/blog/${edge.node.slug}`} className={blogStyles.blog_title} dangerouslySetInnerHTML={{ __html: edge.node.title }}&gt;&lt;/Link&gt;&lt;/h2&gt;
                      &lt;p className={blogStyles.blog_date}&gt;{edge.node.date}&lt;/p&gt;
                      &lt;p className={blogStyles.blog_content} dangerouslySetInnerHTML={{ __html: edge.node.content }} /&gt;
                    &lt;/li&gt;
  
                  &lt;/div&gt;
                )
              })}
            &lt;/ol&gt;
          &lt;/div&gt;
          &lt;BlogNav /&gt;
        &lt;/div&gt;
      &lt;/Layout&gt;
    )
  }
  </code></pre>
  
  <p>I want to incorporate some code like this:</p>
  
  <pre><code>class BlogList extends React.component {
    render() {
      const { currentPage, paginatedPagesCount } = this.props.pageContext
      const isFirst = currentPage === 1
      const isLast = currentPage === paginatedPagesCount
      const prevPage = currentPage - 1 === 1 ? "/" : (currentPage - 1).toString()
      const nextPage = (currentPage + 1).toString()
  
      return (
         // code to display a list of posts 
         {!isFirst &amp;&amp; (
          &lt;Link to={prevPage} rel="prev"&gt;
            ← Previous Page
          &lt;/Link&gt;
        )}
        {!isLast &amp;&amp; (
          &lt;Link to={nextPage} rel="next"&gt;
            Next Page →
          &lt;/Link&gt;
        )}
      )
    }
  }
  </code></pre>
  
  <p>However, my component looks different and I'm not quite sure how to pull in the information I'm passing through context in this example. This line in particular trips me up:</p>
  
  <pre><code>const { currentPage, paginatedPagesCount } = this.props.pageContext
  </code></pre>
  
  <p>My error reads that it cannot read props of undefined. It appears I can't use "this"? I feel like I'm missing something foundational here. React makes my head spin sometimes!</p>
  
  <p>Thoughts? Strategies? Thanks! Excuse any sloppy code: I'm a newbie.</p>