"Using after with before is not supported"

[Jbardon]

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...

[Visely-Team]

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.

[Jbardon]

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]

Yes, or add before or after to the parameters list depending on pagination direction.