darylldoyle / wp-graphql-offset-pagination

Offset pagination for WP GraphQL
GNU General Public License v3.0
16 stars 6 forks source link

No examples how to query next page and nextPage is inactive #2

Closed teetlaja closed 3 years ago

teetlaja commented 3 years ago

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 commented 3 years ago

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

teetlaja commented 3 years ago

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 commented 3 years ago

Aww !! Thank You @teetl6 for this : )