Question

我正在尝试将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查询仅发送一个网络请求，但控制台显示ADMIN_TOKENS_RECEIVED操作不断调度并导致浏览器崩溃。

提前致谢

Answer 1

每当Apollo HOC收到新道具时，它会引发你的行动，这会更新商店并向你的Apollo HOC发送新道具，这会导致你的行动开始......

您可以通过几种不同的方式来解决这个问题。在我看来，最直接的方法是放弃graphql HOC并改为使用withApollo。类似的东西：

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 )
    }
  })
)

以上内容使用重构lifecycle，但您可以轻松地将componentDidMount方法粘贴到组件中。

也就是说，当Apollo已经为您完成时，使用Redux存储GraphQL查询的结果似乎有点多余。

Apollo的默认行为是首先从缓存中检索数据，并且只在数据不存在时才发出网络请求（这也是您只看到一个网络呼叫的原因）。这意味着您的应用程序中的任意数量的组件都可以使用相同的graphql HOC包装，并且只有要呈现的第一个组件才会触发对GraphQL端点的请求 - 所有其他组件都将获得其{{1}来自缓存。

Apollo Client和Redux设置会导致无限渲染循环

1 个答案: