У меня есть компонент React, который вызывает запрос, который ожидает получить массив объектов (для данных проверки). Затем я использую его для проверки HTML-формы, которая, в свою очередь, определяется внутри элемента мутации apollo. То, как он структурирован в операторе return метода компонента render()
, работает, но выглядит громоздко и напоминает мне об эре ада обратных вызовов. Что я действительно хочу сделать, так это избавиться от элемента <QueryCustomerValidations>
в методе render()
и переместить его (в идеале) в событие жизненного цикла componentDidMount
. Чтобы валидаторы можно было загрузить туда для дальнейшего использования в форме, оставьте <MutationCreateCustomer>
inside render ().
Прямо сейчас мне нужно обернуть форму внутри мутации. Мутация внутри функции стрелки, которую возвращает запрос, чтобы получить асинхронные данные в правильном порядке.
//-------------------------------------------------------------------------
// Component Lifecycle Eventhandler Methods
//-------------------------------------------------------------------------
componentDidMount()
{
}
//-------------------------------------------------------------------------
// Render Method Section
//-------------------------------------------------------------------------
public render(): JSX.Element
{
// Return Form
return (
<React.Fragment>
{/* PAGE TITLE */}
<h2 className="text-center mb-3">Agregar Nuevo Cliente</h2>
{/* LOAD VALIDATIONS INTO STATE */}
<QueryCustomerValidations
query={Q_GET_CUSTOMER_VALIDATIONS}
>
{({ loading: loadingValidations, error: errorValidations, data: dataValidations }) =>
{
if (loadingValidations)
{
return "Cargando..."
}
if (errorValidations)
{
return `Error: ${errorValidations.message}`
}
if (dataValidations)
{
const validators: ValidationDescriptor[] = []
dataValidations.getCustomerValidations.forEach((validator) => {
validators.push(validator as ValidationDescriptor)
})
this.validators.setValidators(validators)
}
/* DATA ENTRY FORM */
return (
<div className="row justify-content-center">
<MutationCreateCustomer
mutation={M_CREATE_CUSTOMER}
onCompleted={() => this.props.history.push('/')}
>
{(createCustomer: any) => {
return (
<form name="frmNewCustomer"
className="col-md-8 m-3"
onSubmit={e => this.frmNewCustomer_submit(e, createCustomer)}
>
{ this.ctrl_form_layout(this.props, this.state, this.validators) }
</form>
)
}}
</MutationCreateCustomer>
</div>
)
}}
</QueryCustomerValidations>
</React.Fragment>
);
}
Здесь для целей документации представлены интерфейсы для создания запроса. Поскольку я получаю некоторые из этих данных с сервера с помощью клиента apollo, простое решение запроса graphql на onDidMount()
в этом случае не сработает.
getCustomerValidations.ts (Interfaces)
// ====================================================
// GraphQL query operation: getCustomerValidations
// ====================================================
export interface getCustomerValidations_getCustomerValidations {
__typename: "ValidationDescriptor";
field: string | null;
type: string | null;
required: boolean;
max: number | null;
min: number | null;
regex: string | null;
}
export interface getCustomerValidations {
getCustomerValidations: getCustomerValidations_getCustomerValidations[];
}
customer-validations.query.ts (Client side query types)
//---------------------------------------------------------------------------------
// Imports Section (React/Apollo Libs)
//---------------------------------------------------------------------------------
import { gql } from 'apollo-boost';
import { Query } from 'react-apollo'
import { getCustomerValidations } from '../../typeDefs/operations/getCustomerValidations'
//---------------------------------------------------------------------------------
// GQL Query: Customers
//---------------------------------------------------------------------------------
export const Q_GET_CUSTOMER_VALIDATIONS = gql`
query getCustomerValidations {
getCustomerValidations
{
field
type
required
max
min
regex
}
}
`;
//---------------------------------------------------------------------------------
// Query Class: Customers
//---------------------------------------------------------------------------------
export class QueryCustomerValidations extends Query<getCustomerValidations> { }
Правильным решением может быть способ скопировать - и запустить - <QueryCustomerValidations>
element из метода componentDidMount()
или как убрать элемент из метода render()
и вызвать его, как с каким-то способом "ожидания" сделать это, чтобы он мог быть вызывается первым, а мутация после (и с использованием данных из запроса).
Спасибо, я знаю, что это непросто понять.