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

Question

我们目前正在从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>;
      }}
    />
  );
}

如果身份验证成功，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等效组件的区别在于仅渲染它即可发出请求。而且我想知道是否有一种方法可以将相同的机制应用于Mutation，这需要调用mutate函数作为render
prop的一部分。

上面代码片段的Relay等效功能完全可以实现React Apollo的Query功能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>;
      }}
    />
  );
}

Answer 1

对与错，Apollo对如何使用查询和变异作了一些假设。按照惯例，查询只获取数据，而变异则是变异数据。阿波罗将这一范例进一步向前发展，并假设突变将响应某种行动而发生。因此，就像您观察到的那样，Query在装载时获取查询，同时Mutation传递一个函数以实际获取突变。

从这个意义上讲，您已经偏离了“应该使用”这些组件的方式。

我认为您的方法called没有任何问题-
假设永远不会重置，您的组件应按预期运行。但是，您也可以选择创建一个简单的包装器组件，以利用以下优势componentDidMount：

class CallLogin extends React.Component {
  componentDidMount() {
    this.props.login()
  }

  render() {
    // React 16
    return this.props.children
    // Old School :)
    // return <div>{ this.props.children }</div>
  }
}

export default function Authenticator({ apiKey, render }) {
  return (
    <Mutation mutation={AUTH_MUTATION} variables={{ apiKey }}>
      {(login, { data, error }) => {
        const token = (data && data.login.token) || undefined;
        return (
          <CallLogin login={login}>
            {render({ error, token })}
          </CallLogin>
        )
      }}
    </Mutation>
  );
}