Блог

Главная - Вопросы по программированию - Как обновить запрос GraphQL при нажатии кнопки

Как обновить запрос GraphQL при нажатии кнопки

#reactjs #graphql

#reactjs #graphql

Вопрос:

Я ищу хороший способ обновить часть «OrderBy: createdAt_ASC» приведенного ниже запроса graphql при нажатии одной из двух кнопок ниже.

Порядок по умолчанию — 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>

Комментарии:

1. Используете ли вы клиент apollo, redux form или redux?

2. Переменные GraphQL почти наверняка будут частью ответа, но, не зная, как вы выполняете вызов GraphQL, трудно сказать вам, как это подключить.

Ответ №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

Метки: