<Query> vs graphql Hoc - лучший способ перехвата запроса graphql с компонентом в реакции apollo - PullRequest
Новая
       6

<Query> vs graphql Hoc - лучший способ перехвата запроса graphql с компонентом в реакции apollo

0 голосов
/ 13 сентября 2018

В React Apollo 2.1 введен компонент <Query/> для перехвата запроса graphql с компонентом. 

<Query query={GET_DOGS}>
{({ loading, error, data }) => {
  if (loading) return "Loading...";
  if (error) return `Error! ${error.message}`;

  return (
    <select name="dog" onChange={onDogSelected}>
      {data.dogs.map(dog => (
        <option key={dog.id} value={dog.breed}>
          {dog.breed}
        </option>
      ))}
    </select>
  );
}}

В более старой версии мы использовали Graphql Hoc для перехвата запроса. 

export default compose(
  graphql(GET_DOGS)(MyComponent),
  withLoader
)(Component)

Здесь withLoader HOC обрабатывает загрузку, ошибку и состояние данных.

function withLoader(WrappedComponent) {
    class comp extends React.PureComponent {
       render(){
          return this.props.isData?<WrappedComponent {...this.props}/>:<Loading/>
       }
    }
}

Так какой же лучший способ перехватить запрос и почему?Разумное ли решение перенести все запросы, которые были написаны с использованием graphql HOC, на последний компонент <Query/>.

Я не получаю никаких плюсов при написании запроса в соответствии с Apollo 2.1.Личное написание запроса с использованием hoc выглядит чистым и отделенным.Но некоторые люди не рекомендуют использовать HOC.

1 Ответ

0 голосов
/ 16 сентября 2018

ИМХО <Query/> компоненты были введены только для упрощения начального барьера для новичков .Они похожи на другие компоненты и легко читаются.

Их использование ограничено простыми вариантами использования - их использование быстро усложняется в более сложных сценариях.

Попробуйте использовать данные из <Query/>в другом жизненном цикле или попробуйте использовать несколько из них (<Mutation/>) в одном render.

Вы быстро вернетесь к составлению HOC;)

...