不含React <Mutation>组件的阿波罗突变

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+和functional React组件，那么现在有了一个使用Apollo提供的useMutation()钩子的更干净的解决方案：

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);
            }}
        />
    );
}

此外，官方文件称：

Apollo React钩子是在

应用程序中执行突变的主要useMutation。

在Apollo中，现在首选使用钩子而不是HOC，所以如果可以的话，使用useMutation()可能是一个好主意。

您可以在https://www.apollographql.com/docs/react/data/mutations/上阅读useMutation的文档

原始答案：

react-apollo包括两个称为graphql()和withApollo()的HOC，可以用来实现这一点。

两者之间的区别在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);