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

Question

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

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

我们如何键入我们的组件以使其理解传递给graphql的name选项？

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

编辑：如果2个突变具有相同的参数名称（例如string命名为id），我们真的需要将这些参数包装成显式类型吗？

编辑2：当我用{ name: 'xxx' }声明2个突变时，我有这个例外：

TypeError：_this.props.mutate不是函数

如果我只声明一个突变（没有名称选项），它就能正常工作。

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。我没有找到正确输入道具的方法，我认为我没有返回正确的类型（虽然它工作正常）。任何建议都非常欢迎（关于如何删除any）。

Answer 2

突变的默认名称是mutate，您可以通过props.mutate访问。如果你想在同一个组件中有更多的突变，你需要给它们命名，如deleteData和createData。这些都可以通过props.deleteData和props.createData访问。

一个好的做法是命名所有突变，只是为了让你的代码更容易阅读。作为通用名称，mutate不是很具描述性。