"Using after with before is not supported"

Jbardon
Tourist
9 0 0

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 0

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