Apollo客户端和Redux设置导致无限渲染循环

Apollo客户端和Redux设置导致无限渲染循环,redux,infinite-loop,react-apollo,apollo-client,Redux,Infinite Loop,React Apollo,Apollo Client,我正在尝试将React Apollo与Redux连接起来,以便Apollo执行查询和变异,并将返回的数据发送到Redux商店,以便在应用程序中分发数据 我相信我已经接近正确了,但由于某种原因,应用程序进入了一个无限循环的Redux调度,我不知道为什么 见下面的代码: class Admin extends Component { constructor(props) { super(props); } render({ adm

我正在尝试将React Apollo与Redux连接起来,以便Apollo执行查询和变异,并将返回的数据发送到Redux商店,以便在应用程序中分发数据

我相信我已经接近正确了,但由于某种原因,应用程序进入了一个无限循环的Redux调度,我不知道为什么

见下面的代码:

class Admin extends Component {
      constructor(props) {
        super(props);
      }

      render({
        adminAllTokens
      }, {}) {
        return ( /* JSX */  )
      );
    }
    }

    const AllRefreshTokens = gql `
      query {
        allUsers {
          refreshToken
          email
        }
      }
    `;

    const gqlWrapper = graphql(AllRefreshTokens, {
      props: ({
        ownProps,
        data
      }) => {
        ownProps.receivedAdminTokens(data.allUsers); //dispatch to Redux store
        return {
          ...data,
          gqladminAllTokens
        };
      }
    });

    function mapStateToProps(state, ownProps) {
      return {
        adminAllTokens: state.auth.adminAllTokens
      };
    }

    function mapDispatchToProps(dispatch) {
      return {
        receivedAdminTokens: tokens => {
          dispatch(adminTokensReceived(tokens));
        }
      };
    }

    const reduxWrapper = connect(mapStateToProps, mapDispatchToProps);
    export default compose(reduxWrapper, gqlWrapper)(Admin);
adminTokensReceived()
操作位于reducer文件中:

export const adminTokensReceived = tokens => ({
    type: 'ADMIN_TOKENS_RECEIVED',
    tokens
});
GraphQL查询只发送一个网络请求,但控制台不断显示收到的
管理令牌
操作调度,并导致浏览器崩溃


提前感谢

每当阿波罗HOC收到新道具时,它就会触发您的行动,从而更新存储并向您的阿波罗HOC发送新道具,从而触发您的行动

有几种不同的方法可以处理这个问题。在我看来,最简单的方法是放弃
graphql
HOC,转而使用
与Apollo
配合使用。比如:

compose(
  withApollo,
  connect(mapStateToProps, mapDispatchToProps)
  lifecycle({
    componentDidMount() {
      const { client } = this.props
      client.query({ query: AllRefreshTokens })
        .then(({data}) => {
          receivedAdminTokens(data.allUsers)
        })
        .catch( //any error handling logic )
    }
  })
)
上面使用了recocompose的
生命周期
,但是您也可以很容易地将
componentDidMount
方法粘贴到组件中

这就是说,当Apollo已经为您执行GraphQL查询时,使用Redux存储GraphQL查询的结果似乎有点多余


Apollo的默认行为是首先从缓存中检索数据,并且仅在数据不存在时发出网络请求(这也是您只看到一次网络调用的原因)。这意味着应用程序中的任意数量的组件都可以使用相同的
graphql
HOC进行包装,只有第一个要呈现的组件才会触发对graphql端点的请求——所有其他组件都会从缓存中获取其
数据。

非常感谢您的回复,我理解您的意思。我试图复制以下回购协议的做法:-你知道为什么这可以将两者混合在一起,但我的却不起作用吗?我明白你所说的Redux有点过时的意思。在那个例子中,操作是响应一个突变而触发的,不像你在这里尝试的那样。看起来repo并不是使用Redux来持久化查询结果,它依赖于现有的缓存:好的,谢谢再次响应。我想要包含redux的最后一个原因仍然是因为我认为它有利于设置加载状态之类的全局状态。i、 e.开始加载和完成加载状态,但我想阿波罗也能处理所有这些。我想知道回购协议为什么会使用redux?