从 componentDidMount() 调用 Typescript Apollo Query

Question

我有一个 React 组件，该组件调用一个预期接收对象数组（用于验证数据）的查询。然后，我使用它来验证 html 表单，该表单又定义在 apollo Mutation 元素内。它在组件 render() 方法的 return 语句中的结构方式有效，但看起来很麻烦，让我想起了回调地狱时代。我真正想做的是摆脱 render() 方法中的 <QueryCustomerValidations> 元素并将其移入（理想情况下）componentDidMount 生命周期事件。这样验证器就可以加载到那里供以后在表单中使用，然后将 <MutationCreateCustomer> 留在 render() 中。

现在，我必须将表单包装在突变中。箭头函数内的突变，查询 returns 以便以正确的顺序接收异步数据。

    //-------------------------------------------------------------------------
    // 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 客户端从服务器获取了一些数据，因此 onDidMount() 上的简单 graphql 查询解决方案在这种情况下不起作用。

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> { }

正确的解决方案可以是从 componentDidMount() 方法复制并触发 <QueryCustomerValidations> 元素的方法，或者如何从 render() 方法中取出元素以及用某种 "await" 的方式来调用它，这样就可以先调用它，然后调用突变（并使用查询中的数据）。

谢谢，我知道这个不是很容易弄清楚。

Answer 1

您正在寻找 'old'（在 <Query/> 组件之前使用）HOC 模式（带有 compose）描述 here, here and here。

将开始时请求的 "graphql(gqlquery ..."（没有条件 skip 选项）与一个或多个（命名）"gqlmutation ..."（按需调用）组合在一起，为您提供清晰、可读的解决方案。

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

会将 data 和 createSth 属性传递给 <SomeComponent/> 然后 this.props.data 对象将包含 loading、error 和 getCustomerValidations fields/properties。它被描述为 here。

查询将在开始时调用（您可以在this.props.data.loading中期待true），不需要在cDM()处运行查询。突变可以是运行使用 this.props.createSth() - 上面定义的自定义名称（而不是默认道具名称 mutate）。

当然，您可以将它们与其他所需的 HOC 混合使用，f.e。 redux connect()、withFormik() 等 - 只需添加一行代码即可。

从 componentDidMount() 调用 Typescript Apollo Query

Call Typescript Apollo Query from componentDidMount()

reactjs

typescript

react-apollo

apollo-client

react-tsx