使用 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 个突变具有相同的参数名称（例如 string 命名为 id），我们真的需要将这些参数包装在显式类型中吗？

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

声明 2 个突变时出现此异常

TypeError: _this.props.mutate is not a function

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

Answer 1

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

访问

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

Answer 2

基于 Miro Lehtonen 提供的 link，这里是对我有用的。

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

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

Using react-apollo, how to define 2 mutations in the same component with TypeScript?

typescript

apollo

reactjs

react-apollo