盖茨比网站上每个帖子下的上一个和下一个链接

Question

I want to show the Prev and Next link under every single post. I followed below tutorial and incorporated in my project, my website structure is different from the one in the tutorial.

https://egghead.io/lessons/gatsby-add-next-and-previous-links-to-a-gatsby-blog

Here is my gatsby-node.js file: https://prnt.sc/qmdmhi and my post.js file: https://prnt.sc/qmdmdh

After incorporating this code, the posts are not created and can not see the links.

POST.JS

/* eslint-disable react/no-danger */
import React from "react";
import { graphql } from 'gatsby';
import PropTypes from 'prop-types';
import styled from 'styled-components';

import Layout from '../components/layout';
import Breadcrumb from '../components/BreadCrumb';
import PostSidebar from '../components/post/PostSidebar';
import PageHero from '../components/PageHero';
import PageTransition from 'gatsby-plugin-page-transitions';

import ShareButtons from "../components/ShareButtons";

const PostContent = styled.article`
  margin: 20px 0 0 0;
`;

const postTemplate = ({ data: { post }, pageContext }) => {
  const {next,prev} = pageContext
  return(  

<PageTransition>
<Layout>
    <PageHero img={post.featured_media.localFile.childImageSharp.fluid} />


    <Breadcrumb
      parent={{
        link: '/blogs/all-blogs',
        title: 'blogs',
      }}
    />
    <div className="container">
      <div className="row" style={{ marginBottom: '40px' }}>
        <PostSidebar
          date={post.date}
          author={post.author.name}
          categories={post.categories}
        />
        <PostContent className="col-lg-9">
          <h1 dangerouslySetInnerHTML={{ __html: post.title }} />
          <div dangerouslySetInnerHTML={{ __html: post.content }} />
        <ShareButtons/>
        {next && <Link to={next.post.slug}>Next</Link>}
        {prev && <Link to={prev.post.slug}>Prev</Link>}
        </PostContent>
      </div>
    </div>

    </Layout>
  </PageTransition>
); 
};

postTemplate.propTypes = {
  data: PropTypes.object.isRequired,
};

export default postTemplate;

export const pageQuery = graphql`
  query($id: String!) {
    post: wordpressPost(id: { eq: $id }) {
      id 
      title
      content
      excerpt
      slug
      author {
        name
      }
      date(formatString: "DD, MMM, YYYY")
      categories {
        id
        name
        slug
      }

      featured_media {
        source_url
        localFile {
          relativePath 
          childImageSharp {
            fluid(quality: 100, maxWidth: 900) {
              ...GatsbyImageSharpFluid_withWebp
            src
            }
          }
        }
      }
    }
    }
  `;

Gatsby-node.js

const path = require('path');
const slash = require('slash');
const { paginate } = require('gatsby-awesome-pagination');

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;

  const pageTemplate = path.resolve('./src/templates/page.js');
  const archiveTemplate = path.resolve('./src/templates/archive.js');
  const postTemplate = path.resolve('./src/templates/post.js');

  const result = await graphql(`
    {
      allWordpressPage {
        edges {
          node {
            id
            status
            link
            wordpress_id
            wordpress_parent
          }
        }
      }
      allWordpressPost(filter: {status: {eq: "publish"}}) {
        edges {
          node {
            id
            link
            status
            categories {
              id
            }
            featured_media {
              localFile{
                  childImageSharp {
                      id
                  } 
              }
          }   
          }
        }
      }
      allWordpressCategory {
        edges {
          node {
            id
            name
            slug
            count
          }
        }
      }

      allSite {
        edges {
          node {
            siteMetadata {
              title
              description
              author
            }
          }
        }
      }
     }
  `);

  // Check for errors
  if (result.errors) {
    throw new Error(result.errors);
  }

  const {
    allWordpressPage,
    allWordpressPost,
    allWordpressCategory,
  } = result.data;

  exports.onCreateWebpackConfig = ({ actions }) => {
    actions.setWebpackConfig({
        devtool: "eval-source-map"
    });
};

  // Create archive pages for each category
  allWordpressCategory.edges.forEach(catEdge => {
    // First filter out the posts that belongs to the current category
    const filteredPosts = allWordpressPost.edges.filter(
      ({ node: { categories } }) =>
        categories.some(el => el.id === catEdge.node.id)
    );
    // Some categories may be empty and we don't want to show them
    if (filteredPosts.length > 0) {
      paginate({
        createPage,
        items: filteredPosts,
        itemsPerPage: 10,
        pathPrefix: 
        catEdge.node.slug === "blogs"
        ? "/blogs"
        : `/blogs/${catEdge.node.slug}`,
        component: slash(archiveTemplate),
        context: {
          catId: catEdge.node.id,
          catName: catEdge.node.name,
          catSlug: catEdge.node.slug,
          catCount: catEdge.node.count,
          categories: allWordpressCategory.edges,
        },
      });
    }
  });

  allWordpressPage.edges.forEach(edge => {
    if (edge.node.status === 'publish') {
      createPage({
        path: edge.node.link,
        component: slash(pageTemplate),
        context: {
          id: edge.node.id,
          parent: edge.node.wordpress_parent,
          wpId: edge.node.wordpress_id,
        },
      });
    }
  });

  const posts =result.data.allWordpressPost.edges
  posts.forEach(({edge},index)=>{
  /*allWordpressPost.edges.forEach(edge => {*/

      createPage({
        path: `/blogs${edge.node.link}`,
        component: slash(postTemplate),
        context: {
          id: edge.node.id,
        },
      });

  });

};

Answer 1

1. You haven't passed next or prev properties on context in your gatsby-node.js file.
2. This will fail since the structure is edges = [{ node: {...} }] (there is no edge property to destructure): posts.forEach(({edge},index)=>{