Компонент мутации форматирования от Apollo React - PullRequest
Новая
       7

Компонент мутации форматирования от Apollo React

0 голосов
/ 05 июня 2019

Официальная документация React Apollo показывает следующий пример интеграции мутаций в приложение React.

При применении новых правил ts lint я заметил, что эта часть кода несовместима с jsx-no-multiline-js rule.

Отключение этого флага включено, однако лично мне трудно читать такие компоненты с помощью функции в качестве дочернего элемента.Поэтому я ищу несколько способов переформатировать этот код.

Есть предложения?

import gql from "graphql-tag";
import { Mutation } from "react-apollo";

const ADD_TODO = gql`
  mutation AddTodo($type: String!) {
    addTodo(type: $type) {
      id
      type
    }
  }
`;

const AddTodo = () => {
  let input;

  return (
    <Mutation mutation={ADD_TODO}>
      {(addTodo, { data }) => (
        <div>
          <form
            onSubmit={e => {
              e.preventDefault();
              addTodo({ variables: { type: input.value } });
              input.value = "";
            }}
          >
            <input
              ref={node => {
                input = node;
              }}
            />
            <button type="submit">Add Todo</button>
          </form>
        </div>
      )}
    </Mutation>
  );
};

1 Ответ

0 голосов
/ 05 июня 2019

С документы :

  • Обеспечивает, чтобы многострочные выражения JSX были заключены в скобки.
  • Открывающая скобка должна сопровождаться новой строкой.
  • Закрывающей скобке должен предшествовать перевод строки.

Похоже, вы пропустили новую строку перед открывающей скобкой перед первой <div>

<Mutation mutation={ADD_TODO}>
  {(addTodo, { data }) => 
    (
      <div>
        <form
        onSubmit={e => {
          e.preventDefault();
          addTodo({ variables: { type: input.value } });
          input.value = "";
        }}>
        <input
          ref={node => {
            input = node;
          }}
        />
        <button type="submit">Add Todo</button>
      </form>
    </div>
  )}
  </Mutation>
...