How to update GraphQL query on button click - reactjs

Question

I'm looking for a good way to update the "orderBy: createdAt_ASC" portion of the below graphql query when one of the two buttons below are clicked.
The default order is createAt_ASC and want the user to be able to switch between them.
const ALL_ITEMS_QUERY = gql`
query ALL_ITEMS_QUERY {
items(orderBy: createdAt_ASC) {
id
title
description
image
}
}
`;
Buttons:
<button onClick={sortNew}>Newest</button>
<button onClick={sortOld}>Oldest</button>

Answer 1

First of all, change your query
const ALL_ITEMS_QUERY = gql`
query ALL_ITEMS_QUERY($orderBy: String!) {
items(orderBy: $orderBy) {
id
title
description
image
}
}
`;
On react component use react-apollo
import { compose, graphql } from 'react-apollo'
class ReactComponentName extends Component {
......
//Inside render return this buttons
<button onClick={this.changeOrder.bind(this,"sortNew")}>Newest</button>
<button onClick={this.changeOrder.bind(this,"sortOld")}>Oldest</button>
.......
// And change your export statement and using HOC
export default compose(
graphql(ALL_ITEMS_QUERY, { name: 'allItemQuery' }),
// import query and bind this into props using compose
)(ReactComponentName)
onClick call a function
async changeOrder(order) {
const { allItemQuery } = this.props
const result = await allItemQuery({ variables: { 'orderBy': order } })
//Set state or store filter data
}
Change your state variable or render result data.
Or
Do this cool Query component in Apollo client