Question

我们开始在我们的react-redux应用程序之一中使用react-apollo@2.1，我们正尝试用graphql替换大多数redux东西。因此，我们开始使用<Query>组件，并将某些页面转换为使用<Query>组件。但是在某些页面中，我们有一些现有的逻辑使用React生命周期事件，例如componentWillReceiveProps，如果我们使用<Query>组件，则不会触发这些事件；如果我们像下面这样使用HOC类型查询，则生命周期事件会得到被解雇，我们将在道具中获取数据

导出默认图表ql（GET_APP_INFO，{ 选项：ownProps =>（{ 变量：{appName：ownProps.params.app} }）}）

我的理解是，组件是最新的查询方式，而HOC是可能不推荐使用的旧方法，我还看到了其他一些使用withApollo（）查询的方式，如下所示。

this.props.client.query（{ 查询：gql ...，变量：{...}， }）;

所以我正在寻找有关何时使用这些不同类型的查询模式来获取数据的建议

Answer 1

查询组件和graphql HOC具有相同的基本功能，因此从这一角度不应有任何区别。您的Query组件示例未运行生命周期方法，您可以将Query组件上移一级组件，并且其工作原理完全相同。像这样：

const CompQueryWrapper = () => {
  return (
    <Query ...>
      {({ data, loading, error }) => <CompWithLifecycle data={data} />}
    </Query>
}

您还可以将生命周期逻辑下移一个级别。在这种情况下，reactions/component有时会很方便，当您只是想在道具变更时触发一些事情，而又不想参加制作新班级的仪式。

是的，对于您的具体情况，我的建议是将查询上移，以便触发生命周期，或者将生命周期逻辑下移，以便可以由查询结果触发。

通常，我用于查询的两个组件是

查询组件
ApolloConsumer（基本上只是withApollo的渲染支持版本）

如果可以使用查询组件，则可以使用查询组件。它适用于大多数情况。 ApolloConsumer用于查询的用例是当您不想立即触发查询时。例如，假设您有一个表单，需要用户提供一些信息，然后根据该输入获取一些数据。这不是突变，因为我们没有更改任何数据，但是我们也不希望像Query组件那样立即触发它。在这种情况下，请使用ApolloConsumer获取客户端实例，然后使用client.query触发查询。

Answer 2

如果要使用React-Apollo并运行Query Dynamic（例如在ReactLifeCycleMethod内部或以任何其他方法（在某些情况下，当任何事件侦听器触发时）运行Query Dynamic），则可以使用Client来访问Query或Mutation

React-Apollo具有Consumer，具有React Context API

在应用程序的顶层，您可以像这样实现ApolloProvider

 <ApolloProvider client={client} >
    < App />
 </ApolloProvider>

现在您可以访问客户端

您可以使用客户端创建查询

  client.query()

或

  client.mutate()

如果要在其他组件中使用客户端，则必须使用（例如对新的Context API进行响应）

  class App extends React.Component {
     render()  {
        return(
           <ApolloConsumer >
              { client => { 

                <MyComponent accessClient={client} />

              } }
           <ApolloConsumer>  
          )
       }      
  }

现在您可以作为道具访问客户端

         class App extends React.Component {

            componentDidMount() {

                  this.props.accessClient.query( ... )
              }


     render()  {
        return( 
          ....
          )

       }}

https://www.apollographql.com/docs/react/essentials/queries.html#manual-query

用React-Apollo查询的不同方法

2 个答案: