Apollo Client 2.1之前
在Apollo Client 2.1之前,当你需要使用高阶组件(HOCs)时,有两种解决方案被正确地指出了,这些方案由henk在另一个答案中进行了概述。我会简要总结一下:
由于HOC只能访问props,所以您需要在父组件中引入正在更改的变量。例如,父组件可以使用React的setState()
方法来管理本地状态中的正在更改的变量。一旦本地状态中的变量发生变化,它可以传递给通过HOC增强的其他组件。HOC可以访问props并使用更改后的变量执行查询。提示:如果您不想引入另一个组件来更改本地状态,则recompose的withState
HOC可能是一个很好的选择。
第二种方式,但可能不太优雅,因为它将您的代码从声明式转换为命令式,是使用withApollo()
HOC,它将Apollo Client实例作为prop提供给您。在React组件中拥有此实例后,您可以在组件的某个类方法(例如onChange
处理程序)中调用client.query({ query: ..., variables: ... })
,一旦变量发生变化。
自Apollo Client 2.1以来
自从
Apollo Client 2.1以来,您可以使用新的Query(和Mutation)组件。HOC仍然存在,但不再由
文档广告。但是,新的Query(和Mutation)组件在您的组件中使用。它使用了React的渲染属性模式。
import React from "react";
import { Query } from "react-apollo";
import gql from "graphql-tag";
const GET_TODOS = gql`
{
todos {
id
type
}
}
`;
const Todos = () => (
<Query query={GET_TODOS}>
{({ loading, error, data }) => {
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
return data.todos.map(({ id, type }) => (
<p key={id}>{type}</p>
));
}}
</Query>
);
通过将此控制流移至组件内部而不仅仅是与HOC共存,您可以将更改的prop作为变量传递给Query(和Mutation)组件。
import React from "react";
import { Mutation } from "react-apollo";
import gql from "graphql-tag";
const TOGGLE_TODO = gql`
mutation ToggleTodo($id: Int!) {
toggleTodo(id: $id) {
id
completed
}
}
`;
const Todo = ({ id, text }) => (
<Mutation mutation={TOGGLE_TODO} variables={{ id }}>
{(toggleTodo, { loading, error, data }) => (
<div>
<p onClick={toggleTodo}>
{text}
</p>
{loading && <p>Loading...</p>}
{error && <p>Error :( Please try again</p>}
</div>
)}
</Mutation>
);
如果你想学习React中的Apollo Client,请查看
这个详细的教程。注意:代码片段取自Apollo Client 2.1发布博客文章。