При использовании `response-apollo` для привязки компонента к запросу, должен ли я использовать компонент` ‹Query› `или функцию` graphql () `?

Я не понимаю, что лучше всего делать при создании нового react-apollo приложения и попытке привязать свои компоненты к запросу graphql.

Например, мне кажется, что в документации react-apollo я предлагаю использовать <Query>:

const GET_ALL_DOGS = gql`
  query {
    dogs {
      id
      breed
      displayImage
    }
  }
`;

const Feed = () => (
  <Query query={GET_DOGS}>
    {({ loading, error, data }) => {
      if (error) return <Error />
      if (loading || !data) return <Fetching />;

      return <DogList dogs={data.dogs} />
    }}
  </Query>
)

Где, как предлагают другие места в документации, я использую функцию graphql():

function TodoApp({ data: { todos } }) {
  return (
    <ul>
      {todos.map(({ id, text }) => (
        <li key={id}>{text}</li>
      ))}
    </ul>
  );
}

export default graphql(gql`
  query TodoAppQuery {
    todos {
      id
      text
    }
  }
`)(TodoApp);

Глядя на примеры и документы, кажется, что <Query> представляет собой подмножество graphql(), и в этом случае кажется, что вам было бы лучше использовать graphql() по всем направлениям, но я подумал, что слышал, что использование <Query> было предпочтительным подходом, и это по всей видимости, чаще используется в руководстве react-apollo документации.

Любая помощь для новичка будет принята с благодарностью. Спасибо!


reactjs graphql apollo-client react-apollo
person Mark B    schedule 02.05.2018    source источник
comment
Вы можете использовать любой из них, это вопрос ваших предпочтений. Использование функции graphql было стандартом до response-apollo 2.1, который, кстати, все еще поддерживает ее. Использование <Query> было введено в react-apollo 2.1, и лично я думаю, что это выглядит чище.   -  person kimobrian254    schedule 03.05.2018

Ответы (3)


arrow_upward
2
arrow_downward

TL; DR Знайте причины, по которым используются свойства рендеринга и компоненты более высокого порядка, а затем выберите то, что лучше всего подходит для вас.

Вместо того, чтобы высказывать свое мнение о том, что использовать, я думаю, что для вас и вашего дальнейшего обучения было бы лучше указать, что это две реализации, использующие два очень важных шаблона React: Render Props (или Function-as-Child-Components) и компоненты более высокого порядка (HOC). Apollo позволяет вам выбрать тот, который лучше всего подходит для вас. Вы должны знать их обоих, потому что вы столкнетесь с обоими во многих местах.

Первый пример - это реализация Render Props. Это ново для Аполлона. Второй пример - реализация HOC.

У Apollo есть отличный пост в блоге, объясняющий, почему они реализовали Render Props для Apollo Client на Medium. См. https://blog.graph.cool/tutorial-render-props-in-react-apollo-2-1-199e9e2bd01e.

Google больше. Продолжаются дискуссии о том, что лучше.

person Casey Benko    schedule 06.05.2018
comment
Отличный ответ. Спасибо @casey! - person Mark B; 07.05.2018

arrow_upward
1
arrow_downward

React-apollo 2.1 выпустил новый компонент Query and Mutation. На мой взгляд, это было огромное улучшение от команды Apollo, создавшей великолепную экосистему GraphQL в модуле react-apollo. Я думаю, что для наилучшей практики вам следует использовать компонент Query, потому что с этого момента все разработчики внешнего интерфейса, которые использовали клиент GraphQL, используют компонент Query и Mutation, но это возможность узнать, как использовать graphql (). Какое-то странное замешательство в первый раз, когда используется функция graphql () в мутации.

person Muhamad Irham Prasetyo    schedule 02.05.2018

arrow_upward
1
arrow_downward

Для более мелких и простых случаев вы можете использовать оба. Ни у одного из них нет особого преимущества. Но я использовал и то, и другое в крупномасштабных сложных случаях, и могу сказать вам, что простота компонентов Query и Mutation сэкономит вам так много времени и избавит от головной боли.

Еще одним недостатком graphql() является то, что он, скорее всего, заставит вас создать родительский компонент для компонента запроса, чтобы заботиться о ваших переменных (в большинстве случаев).

Кроме того, я лично больше занимаюсь реквизитами и элементами, чем определяю все в фигурных скобках и занимаюсь вложенными объектами и отступами. Когда параметры и переменные в graphql () растут, это может легко выйти из-под контроля :)

person morinx    schedule 02.05.2018