Apollo Client 2.1 之前

在 Apollo Client 2.1 之前，当您必须使用高阶组件(HOC) 时，henk在另一个答案中正确指出了两种解决方案。我试着简要总结一下：

• 由于 HOC 只能访问 props，因此您需要在父组件中引入变化的变量。例如，父组件可以使用 React 的setState()方法为不断变化的变量设置本地状态管理。一旦本地状态中的变量发生变化，它就可以传递给由 HOC 增强的其他组件。HOC 可以访问 props 并可以使用更改的变量执行查询。提示：如果您不想在两者之间引入另一个组件来更改本地状态，那么recompose的withStateHOC 可能是一个不错的选择。

• 第二种方式，但可能不太优雅，因为它将您的代码从声明式转换为命令式，将使用withApollo()HOC，它使您可以访问 Apollo Client 实例作为 prop。在您的 React 组件中拥有此实例，一旦您的变量发生变化，您就可以调用client.query({ query: ..., variables: ... })组件的类方法之一（例如onChange处理程序）。

从 Apollo Client 2.1 开始

从Apollo Client 2.1 开始，您可以使用新的 Query（和 Mutation）组件。尽管 HOC 仍然存在，但文档中不再宣传。但是，您的组件中使用了新的 Query（和 Mutation）组件。它使用 React 的渲染props模式。

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 发布博客文章。

您的ProfileWithData组件在渲染某个用户的头像方面做得很好。管理当前显示的头像组件的更改不是该组件的职责。

一种方法是添加一个avatarId从父组件传下来的新props。那么你需要这样写：

graphql(CurrentUserForLayout, {
  options: (ownProps) => ({
    variables: {
      id: ownProps.avatarId
    }
  })
})(Profile);

如果您熟悉react-router，另一种方法是使用路由参数来确定头像 id。您需要graphql像这样调整调用：

graphql(CurrentUserForLayout, {
  options: (ownProps) => ({
    variables: {
      id: ownProps.params.avatarId
    }
  })
})(Profile);

要了解有关此类查询变量用法的更多信息，您可以查看Learn Apollo的React Track。

到目前为止，我知道两种可能的方法。

第一个已经在问题中说明了。变量同时是ProfileWithData. 所以你需要找到一种方法来改变 props 并重新渲染组件。这通常是通过父组件实现的。所以通常你不会改变ProfileWithData. 此组件应仅用于显示目的。然而，这并不是说它不能做到。您可以将父组件的方法传递给子组件以操纵父组件的状态。这将重新渲染两个组件并ProfileWithData使用新的props/变量渲染。

第二种方法是从ProfileWithData组件内部查询。然后，您可以使用状态从组件内部操作变量。可以在此处找到执行此操作的方法

您可以通过使用withApollo高阶组件传递对 Apollo Client 的引用来实现 ，如此处所述：http : //dev.apollodata.com/react/higher-order-components.html#withApollo

然后，您可以调用client.query传入的对象，如下所示：

 class MyComponent extends React.Component {
      runQuery() {
        this.props.client.query({
          query: gql`...`,
          variables: { ... },
        });
      }

      render() { ... }
    }

    withApollo(MyComponent);