使用 react-apollo 查询的不同方式

Question

我们开始在我们的一个 react-redux 应用程序中使用 react-apollo@2.1，我们正试图用 graphql 替换大部分的 redux 东西。所以我们开始使用 <Query> 组件，并将一些页面转换为使用 <Query> 组件。但是在某些页面中，我们有一些现有的逻辑使用像 componentWillReceiveProps 这样的 React 生命周期事件，如果我们使用 <Query> 组件，那么这些事件将不会被触发，如果我们使用像下面这样的 HOC 类型查询，那么生命周期事件就会得到发射了，我们将在 props

中获取数据

export default graphql(GET_APP_INFO, { options: ownProps => ({ variables: { appName: ownProps.params.app } }) })

我的理解是组件是最新的查询方式，HOC 是可能会被弃用的旧方式，我还看到了一些其他使用 withApollo() 进行查询的方式，如下所示。

this.props.client.query({ query: gql..., variables: { ... }, });

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

Answer 1

Query组件和graphql HOC具有相同的基本功能，所以从这个角度来说应该没有区别。您的查询组件示例不是运行生命周期方法，您可以将查询组件向上移出组件一级，它的工作方式完全相同。所以像这样：

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

您还可以将生命周期逻辑下移一个级别。 reactions/component 在这种情况下有时会很方便，当你只想在 props 更改时触发某些东西但不想经历制作新 class 组件的仪式。

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

一般来说，我用来进行查询的两个组件是

查询组件
ApolloConsumer（它基本上只是 withApollo 的渲染道具版本）

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

触发查询

Answer 2

如果你想使用 React-Apollo 和运行 Query Dynamic，例如在 ReactLifeCycleMethod 或任何其他方法中（在某些情况下，当任何事件侦听器触发时），你可以使用 Client 来访问 Query 或突变

React-Apollo 有 Consumer 和 React Context API

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

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

现在您可以访问客户端

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

  client.query()

或

  client.mutate()

如果你想在其他组件中使用客户端，你必须使用（比如 react new Context API）

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

                <MyComponent accessClient={client} />

              } }
           <ApolloConsumer>  
          )
       }      
  }

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

         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 查询的不同方式

Different ways to query with react-apollo

reactjs

graphql

react-apollo