Ecommerce Shopify WordPress Discussion

Pagination in Headless WordPress with WPGraphQL

Currently in Wordpress i can load products on page paginattion to write in url like page/2 page/3 etc Now I try in my next.js application first counts all products and then display pagination and load products the same way by switch page like 1 2 3 etc. But what I see currently I can in wpgraphql pass only next page like: query MyQuery { products(first: 25, after: "YXJyYXljb25uZWN0aW9uOjMxOTQy") { pageInfo { hasNextPage hasPreviousPage endCursor startCursor } nodes { date id name } } } Can anyone help me how can I get finally result to possible pass page example 3 and then load products in this page. Here is my current code: export const useProductsData = () => { const params = useParams() const { handle } = params; const [products, setProducts] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const fetchProductsData = async () => { const query = gql` query { products(where: { categoryIn: "${handle}", stockStatus: IN_STOCK }, first: 25) { nodes { id sku slug status name image { sourceUrl } ... on SimpleProduct { id name price } ... on VariableProduct { id name price } } } } `; try { const result = await fetchWooCommerceData(query); setProducts(result.products.nodes); setLoading(false); } catch (error) { setError(error); setLoading(false); } }; // Call fetchProductData directly when the hook is invoked fetchProductsData(); return { products, loading, error }; }; I found plugin: https://github.com/valu-digital/wp-graphql-offset-pagination But looks like this above working only for users and posts. I try register for products: // Register offsetPagination fields for WooCommerce products register_graphql_field( 'RootQueryToProductConnectionWhereArgs', 'offsetPagination', [ 'type' => 'OffsetPagination', 'description' => 'Paginate products with offsets', ] ); } Now when I query: query Products { products(where: { offsetPagination: { size: 10, offset: 30 } }) { pageInfo { offsetPagination { hasMore hasPrevious total } } nodes { id name # Other product fields } } } I see output: { "data": { "products": { "pageInfo": { "offsetPagination": { "hasMore": true, "hasPrevious": true, "total": 16300 } }, "nodes": [ but when i change page offset then still load the same products.
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.