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

Исправление ошибок и рефакторинг форм React может показаться не самым привлекательным занятием, но это хороший способ почувствовать, что вы в чем-то добиваетесь прогресса, и найти немного нормальности в постоянно меняющемся мире!

Вот что нового в последней версии Vulcan.

Загрузка данных для конкретных полей

Большое изменение в Vulcan 1.15 заключается в том, как обрабатывается загрузка данных для конкретных полей. Это вид загрузки данных, который происходит, когда вам нужно загрузить информацию, относящуюся к определенному полю формы.

Например, для поля categoriesIds сообщения может потребоваться загрузка списка всех доступных категорий, чтобы пользователь мог выбрать одну из них, не вводя вручную ее _id.

Раньше это достигалось путем присвоения фрагмента запроса каждому полю, а затем объединения всех этих фрагментов в один большой запрос, который выполнялся при первой загрузке формы.

Начиная с Vulcan 1.15, каждое поле формы отвечает за загрузку собственных данных благодаря новому FormComponentLoader компоненту.

Хотя это менее эффективно в теории, поскольку заменяет один большой запрос множеством мелких, благодаря пакетной обработке Apollo на практике это не является важным фактором. И это значительно упрощает понимание общей архитектуры.

ПРЕРЫВАНИЕ ИЗМЕНЕНИЙ: теперь в содержании свойства query должно быть указано имя запроса.

До:

postsIds: {
  query: `
    posts {
      _id
      title
    }
  `
}

Сейчас:

postsIds: {
  query: `
    query PostsQuery {
      posts {
        _id
        title
      }
    }
  `
}

Обратите внимание, что запрос может принимать одну переменную, значение поля:

postsIds: {
  query: `
    query PostsQuery($value: [String!]) {
      posts(input: { filter: {  _id: { _in: $value } } }) {
        _id
        title
      }
    }
  `
}

Обработка пустых переменных

Поскольку GraphQL выдаст ошибку, если переменная определена в запросе, но не предоставлена, вы также можете передать функцию свойству query и вернуть этой функцией undefined, если значение не определено, что приведет к прерыванию запроса:

postsIds: {
  query: ({ value }) => value && `
    PostsQuery($value: [String!]) {
      posts(input: { filter: {  _id: { _in: $value } } }) {
        _id
        title
      }
    }
  `
}

Типичным вариантом использования будет форма «новый документ», где значения полей формы обычно будут пустыми. Следуя приведенному выше шаблону, запрос никогда не будет выполняться в этом сценарии.

Примечание об опциях

Из-за того, как теперь обрабатывается загрузка данных для конкретных полей, функция options не может ожидать получения данных. Остерегайтесь undefined ошибок:

Неправильно:

options: props => props.data.products.results.map(product => ({
        value: product._id,
        label: product.name,
      })), // props.data may be undefined

Правильно (с использованием get Лодаша):

options: props => _.get(props, 'data.products.results',   []).map(product => ({
        value: product._id,
        label: product.name,
      })),

Полевые декораторы

Начиная с версии Vulcan 1.15, мы пробуем новый экспериментальный паттерн, который мы называем декораторами полей.

По сути, это «быстрые» функции, которые вы можете вызывать для полей, чтобы автоматически назначать им нужные свойства для данного типа ввода.

Например, вот как использовать новый декоратор поля makeAutocomplete для реализации нового типа ввода autocomplete:

import { makeAutocomplete } from 'meteor/vulcan:core';
const mySchema = makeAutocomplete({
  fieldFoo: {
    optional: true,
    // etc.
  }
}, options)

В этом случае для второго аргумента options требуется следующее свойство:

  • autocompletePropertyName: имя свойства, для которого запускается автозаполнение (например, label, title, name и т. Д.).

Если это поле relation (например, field.resolveAs.relation определено), makeAutocomplete попытается угадать правильный преобразователь для использования на основе отношения. Если нет, вы также можете вручную указать эту опцию:

  • queryResolverName: имя multi преобразователя, который будет запрошен для получения требуемых данных (например, movies, posts и т. Д.).

Учитывая эти параметры, makeAutocomplete добавит правильный тип ввода, а также сгенерирует запросы, необходимые как для загрузки ранее выбранных параметров, так и для автозаполнения предложений.

Обратите внимание, что это все еще немного экспериментально и может измениться в будущем на основе полученных отзывов. Сообщите нам, подходит ли это шаблон или вы предпочитаете что-нибудь более очевидное (но, может быть, также более «волшебное»?), Например input: "autocomplete".

Более простые схемы с createSchema ()

Vulcan 1.15 представляет новую функцию createSchema(). Это меньшая оболочка, которая принимает схему Vulcan и «преобразует» ее в схему SimpleSchema.

Свойство arrayItem

Наличие этого среднего уровня позволяет нам быть немного умнее в некоторых вещах. Например, новое свойство arrayItem позволяет указывать тип и форму элементов массива без необходимости создавать отдельное поле foo.$.

До:

const mySchema = {
  fooArray: {
    type: Array,
    // ...
  },
  'fooArray.$': {
    type: String,
    // ...
  }
}

Сейчас:

const mySchema = createSchema({
  fooArray: {
    type: Array,
    arrayItem: {
      type: String,
      // ...
    },
    // ...
  }
});

Прочие улучшения

Улучшенная кнопка MutationButton

Компонент MutationButton теперь покажет вам любые ошибки GraphQL, возникающие в результате мутации, в небольшой всплывающей подсказке над кнопкой.

Метеор 1.10.2

Теперь мы официально поддерживаем последнюю версию Meteor.

Ведение журнала схемы GraphQL

Схема GraphQL вашего приложения теперь автоматически регистрируется в schema.graphql файле в корне вашего проекта при каждом изменении кода.

Устранение неполадок при обновлении

Если у вас возникнут проблемы с обновлением, сообщите нам об этом в чате Slack.

Одна из распространенных проблем - наличие устаревших версий пакетов Meteor. В частности, убедитесь, что пакет meteor:apollo имеет версию 3.1.0.