Вызовите Typescript Apollo Query из componentDidMount () - PullRequest
Новая
       20

Вызовите Typescript Apollo Query из componentDidMount ()

1 голос
/ 27 мая 2019

У меня есть React Component, который вызывает Query, который ожидает получения массива объектов (для данных проверки), который я затем использую для проверки HTML-формы, которая, в свою очередь, определяется внутри элемента Mutation apollo, как онструктурированный внутри оператора return компонента render () метод работает, но выглядит громоздким и напоминает мне об эре ада обратного вызова.Что я действительно хочу сделать, так это избавиться от элемента <QueryCustomerValidations> в методе render () и переместить его (в идеале) в событие жизненного цикла componentDidMount, чтобы валидаторы можно было загрузить туда для последующего использования в форме, а затем оставить<MutationCreateCustomer> внутри рендера ().

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

    //-------------------------------------------------------------------------
    // 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 cli, простое решение для запросов к графу на 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> из метода componentDidMount () или как убрать элемент из метода render () иНазовите это как-то с помощью какого-то «ожидающего» способа сделать это так, чтобы его можно было вызывать сначала, а затем - мутацию (и используя данные из запроса).

Спасибо, я знаю, что это не очень легковыяснить.

1 Ответ

2 голосов
/ 27 мая 2019

Вы ищете «старый» (использованный до <Query/> компонент) шаблон HOC (с compose), описанный здесь , здесь и здесь .

Составление «graphql (gql query ...»), запрошенного при запуске (без условной опции skip), с одним или несколькими (именованными) «gql mutation ...» (вызываемыми по требованию) дает вам четкое, удобочитаемое решение. 

compose(
  graphql(Q_GET_CUSTOMER_VALIDATIONS),
  graphql(gql`mutation { ... }`, { name: 'createSth' })
)(SomeComponent)

передаст data и createSth реквизиты <SomeComponent/>, тогда this.props.data объект будет содержать loading, error и getCustomerValidations поля / свойства. Здесь описано .

Запрос будет вызываться при запуске (вы можете ожидать true в this.props.data.loading), нет необходимости запускать запрос в cDM(). Мутация может быть запущена с использованием this.props.createSth() - пользовательское имя определено выше (вместо имени по умолчанию mutate).

Конечно, вы можете смешивать их с другими необходимыми HOC, например redux connect(), withFormik() и т. д. - просто путем добавления одной строки кода.

...