Как вызвать GraphQL-запрос из другого компонента React / ReactNative

Question

У меня есть некоторые проблемы.У меня есть 2 компонента в React Native.

1.(Компонент A) для отображения данных, этот компонент использует запрос к graphql

2.(Компонент B) - кнопка для запуска запроса в компоненте A с некоторой фильтрующей переменной.

Когда я нажимаю компонент кнопки,

1. он мутирует

2. сохранить фильтр в состоянии ссылки на GraphQL

3. запускает компонент A для повторного отображения новых данных.

Проблема в том, что компонент A не выполняет повторное отображение.

Вот код, который срабатывает, когда янажмите на кнопку

this.props.mutate({
  variables: {
    Category
  },
  refetchQueries: [{
    query: FETCH_SEARCH,
    variables: {
      productcategory: Category,
      search: '',
    },
  }]
});

Как мне выполнить компонент рендеринга A?

Спасибо

Answer 1

Эй, ваш вопрос в основном "что не так с моим кодом?"без предоставления большого количества кода.Я попытаюсь угадать, что здесь не так:

Ваш компонент запроса по-прежнему подключен к старым переменным, при его повторном наборе с новыми переменными компонент запроса не обновляется.Только при повторном получении с теми же переменными оно будет обновляться.

Что делать вместо этого:

React не предназначен для создания системы обмена сообщениями от одного компонента к другому.Вместо этого поднимите состояние переменной в родительский компонент или хранилище данных, чтобы компонент запроса брал переменные из реквизитов (если реквизиты имеют то же имя, что и ожидаемые имена переменных, вам даже не нужно явно передавать их в graphql Опции функций компонентов более высокого порядка. Теперь запрос будет автоматически перезагружаться при изменении реквизита и, следовательно, переменных.

<QueryComponent
  search={this.state.search}
  productcategory={this.state.productcategory}
/>
<SelectorComponent
  onSearchChange={search => this.setState({ search })}
  onCategoryChange={productcategory => this.setState({ productcategory })}
/>