No examples how to query next page and nextPage is inactive

[teetlaja]

Hi

How do you query next page? Real life examples would pe very helpful, at the moment i can't figure out how i will get next page. Also the nextPage and previousPage queries are not working in WPGrapqhQL, are they dereceated?

[tsrCodes]

Hi @teetl6 Did you find any solution for that ???

[teetlaja]

Hi @teetl6 Did you find any solution for that ???

Yes @tsrCodes , I did.

First you'll need also WPGraphQL Offset Pagination (https://www.wpgraphql.com/extenstion-plugins/wpgraphql-offset-pagination/)

Just add variables in Vue component data() and when you update them, Apollo is making reactivealy new query.

Here's my code, but as you see in my code i get "size" from props, you can.

So here's my parent component to get data and add this to different sections on page (focus on variables):

<template>
  <div>
    <CategoriesPostsSlider />
    <FeaturedPostsSection />
    <BlogGrid :posts="posts" />
  </div>
</template>
<script>
import gql from 'graphql-tag'

import FeaturedPostsSection from '@/components/Blog/FeaturedPostsSection'
import CategoriesPostsSlider from '@/components/Blog/CategoriesPostsSlider'
import BlogGrid from '@/components/Blog/BlogGrid'

export default {
  components: {
    // BlogGridElementSmall,
    FeaturedPostsSection,
    CategoriesPostsSlider,
    BlogGrid,
  },
  data() {
    return {
      size: 6,
      offset: 0,
    }
  },
  apollo: {
    posts: {
      query: gql`
        query Posts($size: Int, $offset: Int) {
          posts(where: { offsetPagination: { size: $size, offset: $offset } }) {
            pageInfo {
              offsetPagination {
                hasMore
                hasPrevious
                total
              }
            }
            nodes {
              id
              isSticky
              title
              excerpt
              uri
              featuredImage {
                node {
                  srcSet(size: BLOG_GRID_THUMB)
                }
              }
              categories {
                nodes {
                  name
                }
              }
            }
          }
        }
      `,
      variables() {
        return {
          size: this.size,
          offset: this.offset,
        }
      },
    },
  },
}
</script>

Here's the code for child component where i needed pagination (BlogGrid):

<template>
  <Section title="Articles" bg="light-gray">
    <b-row class="blog-grid"
      ><b-col
        v-for="post in posts.nodes"
        :key="post.id"
        md="4"
        class="blog-grid-single d-flex"
      >
        <BlogGridElement
          :featured-image="
            post.featuredImage
              ? post.featuredImage.node.srcSet
              : 'static/timbeter_logo_green.svg'
          "
          :categories="post.categories.node"
          :title="post.title"
          :excerpt="post.excerpt"
          :uri="post.uri"
        ></BlogGridElement> </b-col
    ></b-row>
    <b-col
      ><b-row align-h="center">
        <b-col md="auto">
          <Pagination
            v-if="posts.pageInfo"
            :page-info="posts.pageInfo"
            :size="size"
            @showNext="showNext"
            @showPrevious="showPrevious"
          />
        </b-col> </b-row
    ></b-col>
  </Section>
</template>

<script>
import Section from '@/components/common/Section'
import BlogGridElement from '@/components/common/BlogGridElement'
import Pagination from '@/components/common/Pagination'
export default {
  components: {
    Section,
    BlogGridElement,
    Pagination,
  },
  props: {
    posts: {
      type: Object,
      required: true,
    },
    size: {
      type: Number,
      required: true,
    },
  },
  methods: {
    showNext() {
      this.offset += this.size
    },
    showPrevious() {
      this.offset -= this.size
    },
  },
}
</script>

<style lang="scss" scoped>
$col-gaps: 2.5px;
.blog-grid {
  margin: 0 (-$col-gaps);
  &-single {
    padding: 0 $col-gaps;
    margin-bottom: 25px;
  }
}
</style>

I haven't made pages yet but at least i can switch between post pages. So when you are changing your properties in data(), Apollo smart Query reactively updates your Query and you don't have to do anything else.

[tsrCodes]

Aww !! Thank You @teetl6 for this : )