reactjs - 使用 react-apollo，如何使用 TypeScript 在同一组件中定义 2 个突变？

Question

使用以下 issue on GitHub我能够使用 Typescript 进行一次更改。但是我没有找到在同一个组件中使用 2 个突变的方法。

this.props中只有一个mutate()函数。

我们必须如何输入组件才能使其理解传递给 graphql 的 name 选项？

graphql<ContainerProps, {}, string, ContainerProps>(gql`... `, { name: 'deleteData' });
graphql<ContainerProps, {}, string, ContainerProps>(gql`...`, { name: 'createData' });

编辑:如果这 2 个突变具有相同的参数名称(例如一个名为 id 的 string)，我们真的需要将这些参数包装在一个显式类型中吗？

编辑 2:当我用 { name: 'xxx' } :

声明 2 个突变时，我有这个异常

TypeError: _this.props.mutate is not a function

如果我只声明一个突变(没有 name 选项)，它会正常工作。

Answer 1

根据 Miro Lehtonen 提供的链接，这对我有用。

type MutationProps = {
    create: MutationFunc<IResponse, ICreateVariables>;
    delete: MutationFunc<IResponse, IDeleteVariables>;
};

type ContainerProps = OtherQueryProps & MutationProps;

const withCreate =
    graphql<ContainerProps, IResponse, ICreateVariables, ContainerProps>(
        CreateMutation,
        {
            // tslint:disable-next-line:no-any
            props: ({ mutate, ...rest }): any => ({
                ...rest,
                create: mutate
            })
        });

删除突变的代码相同。

代码有效，但我不喜欢其中有any。我没有找到正确输入 Prop 的方法，而且我认为我没有返回正确的类型(尽管它工作正常)。非常欢迎任何建议(关于如何删除 any)。