Closed teetlaja closed 3 years ago
Hi @teetl6 Did you find any solution for that ???
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.
Aww !! Thank You @teetl6 for this : )
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?