Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

"Using after with before is not supported"

"Using after with before is not supported"

Jbardon
Tourist
9 0 1

Hello,

 

I'm trying to create a Pagination with React and Graphql. I'm using React with hooks and @Apollo/react-hooks 3.1.5. You can see my Query and React Code at the bottom.

 

When I trigger the next page the request work like a charm but wheen I'm trying to go back an error comes up: "Using after with before is not supported".

 

Do you know why this problem shows up? The message seems to be pretty clear but then how can I create my Pagination then ? 

 

When I'm looking the way shopify does it on the preoduct it's pretty similar (On the products listings).

 

Graphql Query

 

export const GET_PRODUCTS = gql`
    query GetProducts($after: String, $before: String, $query: String) {
        products(first: 20, after: $after, before: $before, query: $query) {
            pageInfo {
                hasNextPage
                hasPreviousPage
            }
            edges  {
                cursor 
                node {
                    title
                    images(first: 1) {
                        edges {
                            node {
                            originalSrc
                            altText
                            }
                        }
                    }
                    metafields(first: 10, namespace:"global") {
                        edges {
                            node {
                                namespace 
                                value
                            }
                        }
                    }
                }
            }
        }
    }
`;

 

 

React Code (Query and functions)

 

const [getProducts, { 
        data, 
        loading, 
        error
    }] = useLazyQuery(GET_PRODUCTS)

    useEffect(() => {
        getProducts()
    }, [])

    function nextPage(cursor) {
        getProducts({ variables: { after: cursor }})
    }

    function previousPage(cursor) {
        getProducts({ variables: { before: cursor }})
    }

 

 

React Code (Pagination)

 

<Pagination
  hasPrevious={data.products.pageInfo.hasPreviousPage}
  previousKeys={[74]}
  previousTooltip="Previous Products"
  onPrevious={() => previousPage(data.products.edges[0].cursor)}
  hasNext={data.products.pageInfo.hasNextPage}
  nextKeys={[75]}
  nextTooltip="Next Products"
  onNext={() => nextPage(data.products.edges[data.products.edges.length - 1].cursor)}
/>

 

Wich is strang is also my request payload don't contain after...

 

 

Payload.PNG

 

Replies 3 (3)

Visely-Team
Shopify Partner
1843 210 488

after and before parameters are mutual exclusive, so you should use only after in products(first: 20, after: $after, before: $before, query: $query) if you want to move forward, and only before if you want to move backwards. I.e. your GraphQL query which is now a constant GET_PRODUCTS should be built dynamically.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
Jbardon
Tourist
9 0 1

If I correctly understand you said I have to create each separate queries for create my pagination so GET_PRODUCTS_NEXT or GET_PRODUCTS_BEFORE for exemple?

Visely-Team
Shopify Partner
1843 210 488
Yes, or add before or after to the parameters list depending on pagination direction.
Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog