Реагировать администратором — отправлять пользовательский запрос во время редактирования/создания записи

#reactjs #typescript #graphql #react-admin #react-typescript

Вопрос:

У меня есть простая форма для редактирования камеры

 export const CameraEdit: FC<ResourceComponentProps> = (props: ResourceComponentProps) => (
  <Edit {...props}>
    <SimpleForm>
      <TextInput source="name" />
      <TextInput source="connection" />
      <Button variant="contained" label="Preview"></Button>
    </SimpleForm>
  </Edit>
);
 

Когда я нажимаю на Preview кнопку, я хочу

  1. получение предварительного просмотра из бэкенда (с использованием GraphQL)
  2. загрузите изображение
  3. покажите это в правой части формы

Я не знаю, как это сделать:

  1. выдайте дополнительный асинхронный запрос (не связанный с редактированием данных), как в обычном приложении react, у меня был контейнер и компонент
  2. загрузите изображение (результат запроса)
  3. добавьте дополнительный div в SimpleForm — я читал, что он может обрабатывать только прямые входы

Комментарии:

1. Я думаю, что наивным решением было бы использовать useLazyQuery с Apollo внутри компонента. В конце концов, приложение React Admin — это просто обычное приложение React. Внутри SimpleForm вы можете визуализировать практически все , что захотите.

2. @Herku Раньше у меня были отдельные уровни приложений: контейнер для взаимодействия с бэкэндом и компонент в качестве уровня представления. Мне нравится, и я хотел бы скопировать его здесь

3. Я хочу сказать, что не имеет значения, какой компонент вы используете для редактирования. Это может быть один из контейнеров, которые вы описываете. Вам просто нужно будет переслать все реквизиты, предназначенные для <Edit /> компонента.