How can I get previous and next post in Strapi?

Questions and Answers
1

Hello,

I did some searching, but I couldn’t find how to reach the previous and next post in the single post. Does anyone have a suggestion?

Thanks.

System Information
  • Strapi Version: v4.11.1
  • Operating System:
  • Database: SQLite
  • Node Version: v18.16.0
  • NPM Version:
  • Yarn Version:
2

Hi @ozcancelik,

Do you mean that you are accessing a single post with the findOne() method and you want to have a way to get the next post after the one you fetched? What does “next post” mean in your project? Is it next in regards of published date or maybe an alphabetical order?

Cheers

3

Thank you for reply @andreasoikon ,

Very good question :slight_smile: Also didn’t mention for GraphQL. Sorry for that. I was using WPGraphQL and Wordpress has get_adjacent_post() it returns previous or next post. I made a small plugin for that.
https://raw.githubusercontent.com/ozcancelik/wpgraphql-prev-next-random-post/main/wpgraphql-prev-next-random-post.php

I was using this feature as if it were a native feature. Just want to fetch another post based on the publishedAt and also need based on locale because I am using multiple languages.

My current query is :

export const GET_SINGLE_POST = gql`
  query getSinglePost($locale: I18NLocaleCode, $slug: String) {
    posts(locale: $locale, filters: { Slug: { eq: $slug } }) {
      data {
        attributes {
          Title
          Slug
          BlogContent
          publishedAt
          FeaturedImage {
            data {
              attributes {
                url
              }
            }
          }
          localizations {
            data {
              attributes {
                Title
                Slug
                Content
                FeaturedImage {
                  data {
                    attributes {
                      url
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
`;

Thank you again and sorry for missing information.

4

@ozcancelik now I understand better :slightly_smiling_face:

Unfortunately my knowledge starts and stops in REST APIs :sweat_smile: I don’t have experience with GraphQL.

Just thinking out loud, if I were to implement something like that in REST, I would tinker with the findOne() function of Strapi and customize it to return what I consider next (and/or previous post). Again, I don’t know if this is feasible in GraphQL.

Best regards

5

I dont know it’s the best solution but I found a way to get Previous and Next post with Strapi GraphQL by publishedAt

My queries are:

export const GET_NEXT_POST = gql`
  query GetNextPost($publishedAt: DateTime, $locale: I18NLocaleCode) {
    posts(
      filters: { publishedAt: { lt: $publishedAt } }
      locale: $locale
      sort: "publishedAt:desc"
      pagination: { limit: 1 }
    ) {
      data {
        attributes {
          Title
          Slug
          publishedAt
        }
      }
    }
  }
`;

export const GET_PREVIOUS_POST = gql`
  query GetPreviousPost($publishedAt: DateTime, $locale: I18NLocaleCode) {
    posts(
      filters: { publishedAt: { gt: $publishedAt } }
      locale: $locale
      sort: "publishedAt:asc"
      pagination: { limit: 1 }
    ) {
      data {
        attributes {
          Title
          Slug
          publishedAt
        }
      }
    }
  }
`;

In react component there is 2 another useQuery and useState for both

const [nextPost, setNextPost] = useState<any>(null);
const [previousPost, setPreviousPost] = useState<any>(null);

const { data: nextPostData } = useQuery(GET_NEXT_POST, {
    variables: {
      publishedAt: post?.publishedAt,
      locale,
    },
    fetchPolicy: "network-only",
    onCompleted: (data) => {
      setNextPost(data?.posts?.data[0]?.attributes);
    },
  });

  const { data: previousPostData } = useQuery(GET_PREVIOUS_POST, {
    variables: {
      publishedAt: post?.publishedAt,
      locale,
    },
    fetchPolicy: "network-only",
    onCompleted: (data) => {
      setPreviousPost(data?.posts?.data[0]?.attributes);
    },
  });

Of course there is little bit repeating code but you can make it more rebust. I want to share the logic. I hope helps someone.

@andreasoikon Thank you again to interest. :v:

6

I’m saving this for the future, thank you!

1 Like