阿波罗(Apollo):如何获得依赖于第一次查询参数的第二次查询结果?

时间:2019-07-25 21:25:47

标签: reactjs react-redux react-apollo

我正在加载一个页面,该页面需要两个单独的查询才能将所有必需的数据添加到该页面的道具中。

我需要第一个查询的结果,并将第一个查询的结果用作第二个查询的参数。

当前,第一个查询getCommunityCampaignBySlug返回查询中指定的对象。使用初始查询提供的变量触发第二个查询getOrganizationBySlug。在VSC调试器中,数据返回一个组织对象,但{org}仍未定义。

我试图创建一个compose函数,但是不确定如何使其与redux connect()一起使用。我也看过关于使用react-adopt的文档,但不清楚如何在使用时将变量传递给查询。

我想知道问题是否出在两个查询都返回组织对象,但是,当我删除第一个查询的组织部分时,同样的问题仍然存在。

export default connectApp(props => (
  <Query
    query={getCommunityCampaignBySlug}
    variables={{ slug: props.match.params.slug }}
  >
    {
      ({ loading: loadingCampaign, error, data: { campaign } }) => (
        <Query
          query={getOrganizationBySlug}
          variables={{ slug: campaign.organization.slug }}
        >
          {
            ({ loading: loadingOrg, error, data: { org } }) =>
              loadingCampaign || loadingOrg
                ? <LoadingIndicator />
                : <CommunityMatchPage 
                    {...props}
                    campaign={campaign}
                    nonprofit={org}
                  />
          }
        </Query>
      )}
  </Query>
));

预期:要接收两个不同的数据对象{campaign}{org}

实际:页面加载为白色,页面上显示错误,没有消息。

0 个答案:

没有答案