没有 React <Mutation> 组件的 Apollo 突变

Question

Apollo 的<Mutation>组件通常运行良好，但有时您需要在render()方法。

在某些情况下，您可以简单地传递突变函数，如下所示：

import React, { Component } from "react";
import { DO_MUTATION } from "./mutations";
import { Mutation } from "react-apollo";

export default class MyComponent extends Component {
    render() {
        return (
            <Mutation mutation={DO_MUTATION}>
                {(doMutation) => (
                    <Button
                        onPress={() => {
                            this.handleSomething(doMutation);
                        }}
                    />
                )}
            </Mutation>
        );
    }

    handleSomething = (doMutation) => {
        /* DO SOME STUFF */
        doMutation();
    };
}

但在其他情况下，这不是一个非常合理的选择，例如：

import React, { Component } from "react";
import { DO_MUTATION } from "./mutations";
import { Mutation } from "react-apollo";

import SomeLibrary from "SomeLibrary";

export default class MyComponent extends Component {
    render() {
        return (
            <Mutation mutation={DO_MUTATION}>
                {(doMutation) => (
                    <Button
                        onPress={() => {
                            SomeLibrary.addListener(this.listenerHandler);
                        }}
                    />
                )}
            </Mutation>
        );
    }

    listenerHandler = () => {
        /* HOW DO I DO MUTATIONS HERE? */
    };
}

在这些情况下如何进行突变？

Answer 1

React Hooks 更新 (2020-12-18)：

如果你使用 Apollo v3+ 和功能性 React 组件，现在有一个使用useMutation()Apollo 提供的钩子的更简洁的解决方案：

import React from "react";
import { useMutation } from "@apollo/client";
import SomeLibrary from "SomeLibrary";

import { DO_MUTATION } from "./mutations";

export default function MyComponent() {
    const [doMutation, { data }] = useMutation(DO_MUTATION);

    let listenerHandler = () => {
        doMutation({
            variables: {
                some_var: "some_val",
            },
        });
    };

    return (
        <button
            onPress={() => {
                SomeLibrary.addListener(listenerHandler);
            }}
        />
    );
}

另外，官方文档说：

useMutation React hook 是用于在 Apollo 应用程序中执行突变的主要 API。

现在在 Apollo 中使用钩子比 HOC 更受欢迎，所以useMutation()如果可以的话，使用它可能是一个好主意。

您可以在以下useMutation位置阅读文档： https //www.apollographql.com/docs/react/data/mutations/

原答案：

react-apollo包括两个肝卵圆细胞称为graphql()和withApollo()可用于实现此目的。

两者之间的区别在 Apollo 的文档中描述为：

如果您想知道何时使用 withApollo() 以及何时使用 graphql() 答案是大多数时候您会想要使用 graphql()。graphql() 提供了处理 GraphQL 数据所需的许多高级功能。如果您希望 GraphQL 客户端没有任何其他功能，您应该只使用 withApollo()。

当graphql()提供一个突变时，它会添加一个this.props.mutate()函数，可以像这样使用：

import React, { Component } from "react";
import { DO_MUTATION } from "./mutations";
import { graphql } from "react-apollo";

import SomeLibrary from "SomeLibrary";

export class MyComponent extends Component {
    render() {
        return (
            <Button
                onPress={() => {
                    SomeLibrary.addListener(this.listenerHandler);
                }}
            />
        );
    }

    listenerHandler = () => {
        this.props.mutate({
            variables: {
                some_var: "some_val",
            },
        });
    };
}
export default graphql(DO_MUTATION)(MyComponent);

withApollo()是类似的，但提供了一个this.props.client供您直接使用。可以像这样执行突变：

import React, { Component } from "react";
import { DO_MUTATION } from "./mutations";
import { withApollo } from "react-apollo";

import SomeLibrary from "SomeLibrary";

export class MyComponent extends Component {
    render() {
        return (
            <Button
                onPress={() => {
                    SomeLibrary.addListener(this.listenerHandler);
                }}
            />
        );
    }

    listenerHandler = () => {
        this.props.client.mutate({
            mutation: DO_MUTATION,
            variables: {
                some_var: "some_val",
            },
        });
    };
}
export default withApollo(MyComponent);