如何使用React Apollo 2.1的Mutation组件在挂载上运行突变？

我们目前正在从Relay转移到React Apollo
2.1，而我正在做的事情似乎很糟糕。

上下文： 只有在通过用户身份验证（通过API密钥）的情况下，才必须渲染某些组件，因此有一个Authenticator组件可以保护其余的树。

在中App.js，它是这样使用的（显然，下面的所有片段都是最小的示例）：

import React from 'react';
import Authenticator from './Authenticator';
import MyComponent from './MyComponent';

export default function App({ apiKey }) {
  return (
    <Authenticator apiKey={apiKey}
      render={({ error,token }) => {
        if (error) return <div>{error.messagE}</div>;
        if (token) return <MyComponent token={token} />;
        return <div>AuthenticaTing...</div>;
      }}
    />
  );
}

如果身份验证成功，@H_734_3@myComponent将进行渲染。
Authentication在第一次渲染/安装时将身份验证突变发送到服务器，并相应地调用渲染道具。 Authentication.js看起来像这样：

import gql from 'graphql-tag';
import React from 'react';
import { Mutation } from 'react-apollo';

const AUTH_MUTATION = gql`mutation Login($apiKey: String!) {
  login(apiKey: $apiKey) {
    token
  }
}`;

export default function Authenticator({ apiKey,render }) {
  return (
    <Mutation mutation={AUTH_MUTATION} variables={{ apiKey }}>
      {(login,{ data,error,called }) => {
        if (!called) login(); // ⚠️ This seems sketchy ⚠️

        const token = (data && data.login.token) || undefined;
        return render({ error,token });
      }}
    </Mutation>
  );
}

那if (!called) login();就是让我停下来的原因。如果我不指定if (!called)，UI会变得癫痫发作并发送成千上万个请求（这很有意义，调用login()导致render()重新运行的原因），但是那应该怎么使用呢？

看起来Query等效组件的区别在于仅渲染它即可发出请求。而且我想知道是否有一种方法可以将相同的机制应用于@H_734_3@mutation，这需要调用mutate函数作为render
prop的一部分。

上面代码片段的Relay等效功能完全可以实现React Apollo的Query功能@H_734_3@mutation：

// Authentication.js

import React from 'react';
import { graphql,QueryRenderer } from 'react-relay';
import { Environment } from 'relay-runtime';

// Hiding out all the `Environment`-related boilerplate
const environment = return new Environment(/* ... */);

const AUTH_MUTATION = graphql`mutation Login($apiKey: String!) {
  login(apiKey: $apiKey) {
    token
  }
}`;

export default function Authenticator({ apiKey,render }) {
  return (
    <QueryRenderer query={AUTH_MUTATION} variables={{ apiKey }}
      render={render}
    />
  );
}


// App.js

import React from 'react';
import Authenticator from './Authenticator';
import MyComponent from './MyComponent';

export default function App({ apiKey }) {
  return (
    <Authenticator apiKey={apiKey}
      render={({ error,props }) => {
        if (error) return <div>{error.messagE}</div>;
        if (props) return <MyComponent token={props.loginAPI.token)} />;
        return <div>AuthenticaTing...</div>;
      }}
    />
  );
}