我们目前正在从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
首次渲染/安装时将身份验证变异发送到服务器,并相应地调用render prop。 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
component equivalent的不同之处在于简单地渲染它会发出请求。我想知道是否有办法将相同的机制应用于Mutation
,这需要将mutate函数作为渲染道具的一部分。
上面代码片段的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>;
}}
/>
);
}
对或错,Apollo对如何使用查询和突变做出一些假设。按照惯例,查询只会在突变时获取数据,好吧,变异数据。阿波罗进一步采用这种模式,并假设突变将在某种行动中发生。所以,就像你观察到的那样,Query
在mount上获取查询,而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>
);
}