Apollo + React：数据未出现在 componentDidMount 生命周期中

Question

我有一个 React 应用程序，它使用 Redux 进行一些应用程序内状态管理，并使用 Apollo 从服务器获取数据。在我的网络选项卡中，我的 graphql 查询成功并且响应是我所期望的，但是当我尝试在 React 组件的 componentDidMount 生命周期中引用数据时，数据不存在并且加载状态是 'true'.

如果我将我的代码移动到不同的生命周期函数，如 render()，数据会出现，但我需要它在 componentDidMount 中工作。我是 Apollo 的新手。

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";

import SdkMap from "@boundlessgeo/sdk/components/map";
import SdkZoomControl from "@boundlessgeo/sdk/components/map/zoom-control";

import * as mapActions from "@boundlessgeo/sdk/actions/map";

import { graphql } from "react-apollo";
import gql from "graphql-tag";

function mapStateToProps(state) {
  return {
    map: state.map
  };
}

class Map extends Component {
  static contextTypes = {
    store: PropTypes.object.isRequired
  };

  componentDidMount() {
    const store = this.context.store;
    store.dispatch(mapActions.setView([-95.7129, 37.0902], 3));

    /* ADD SITES LAYER */
    store.dispatch(
      mapActions.addSource("sites_src", {
        type: "geojson",
        data: {
          type: "FeatureCollection",
          features: []
        }
      })
    );

    store.dispatch(
      mapActions.addLayer({
        id: "sites",
        source: "sites_src",
        type: "circle",
        paint: {
          "circle-radius": 3,
          "circle-color": "blue",
          "circle-stroke-color": "white"
        }
      })
    );
    
    console.log(this.props.data);  //response doesn't include query fields
    if (this.props.data.allSites) {
      let sites = this.props.data.allSites.edges;

      for (let i = 0; i < sites.length; i++) {
        let site = sites[i].node;
        let geojson = site.geojson;
        if (geojson) {
          console.log(site);
          const feature = {
            type: "Feature",
            geometry: geojson,
            properties: {
              id: site.id
            }
          };
          store.dispatch(mapActions.addFeatures("sites_src", feature));
        }
      }
    }
  }

  render() {
    const store = this.context.store;

    return (
      <SdkMap store={store} >
        <SdkZoomControl />
      </SdkMap>
    );
  }
}

const query = graphql(
  gql`
    query {
      allSites {
        edges {
          node {
            id
            projectId
            location
            areaAcres
            geojson
          }
        }
      }
    }
  `
);

const MapWithRedux = connect(mapStateToProps)(Map);
const MapWithApollo = query(MapWithRedux);

export default MapWithApollo;

Answer 1

首先不需要自己访问this.context。这是一个反模式。始终使用 connect()。如果您需要在组件中使用部分状态，请使用 mapStateToProps。如果你想从你的组件中调度动作，使用 mapDispatchToProps 将函数传递给它，为你进行调度。这是 connect() 接受的第二个参数。

也没有理由将商店传递给子组件，因为您可以单独连接每个需要商店中任何东西的组件。

话虽如此，您的问题是获取数据是异步的，并且在调用 componentDidMount() 时您的请求可能未完成。所以 loading 为真的信息只是意味着你的获取还没有完成。您要么通过例如将其显示给用户显示某种微调器或您在呈现组件之前获取所需的数据。

Apollo + React：数据未出现在 componentDidMount 生命周期中

Apollo + React: data not appearing in componentDidMount lifecycle

apollo

reactjs

react-apollo