Question

我正在寻找一种很好的方法，当单击下面的两个按钮之一时，可以更新以下graphql查询的“ orderBy：createdAt_ASC ”部分。

默认顺序为createAt_ASC，希望用户能够在它们之间进行切换。

const ALL_ITEMS_QUERY = gql`
  query ALL_ITEMS_QUERY {
    items(orderBy: createdAt_ASC) {
      id
      title
      description
      image
    }
  }
`;

按钮：

<button onClick={sortNew}>Newest</button>
<button onClick={sortOld}>Oldest</button>

Answer 1

首先，更改查询

const ALL_ITEMS_QUERY = gql`
  query ALL_ITEMS_QUERY($orderBy: String!) {
    items(orderBy: $orderBy) {
      id
      title
      description
      image
    }
  }
`;

在react组件上使用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调用函数

  async changeOrder(order) {
    const { allItemQuery } = this.props
    const result = await allItemQuery({ variables: { 'orderBy': order } })
    //Set state or store filter data
  }

更改状态变量或呈现结果数据。

或

在Apollo客户端中进行酷炫的Query component

如何在单击按钮时更新GraphQL查询

1 个答案: