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不是很具描述性。

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

2 个答案: