在React中使用GraphQL查询来自上一个查询的数据

Question

const Query = graphql(
  baseNodeQuery([
    'entityId',
    'entityLabel'
  ], 'employment_reference_preset'), {
    options: {
      variables: {
        filter: {
          type: "employment_reference_preset"
        },
        limit: 1000,
        offset: 0
      }
    }
  })
(ExampleComponent);

const EmploymentReferencePresetEntity = ({data: {loading, error, nodeQuery}}) => {
  if (loading) {
    return <p>Loading...</p>;
  }
  if (error) {
    return <p>{error.message}</p>;
  }

  return (
    <div>
      //do something with the data form nodeQuery
    </div>
  )
};

但是，当我想使用从上一次查询中获得的Id进行第二次查询并使用该Id作为筛选器时，该怎么办？当我像以前一样在ExampleComponent中返回另一个graphql查询时，我会得到一个错误，即我没有返回有效的react组件。那我该怎么做呢？

提前感谢！

Answer 1

我过去能够做到这一点的方法是将“子”查询分离到它自己的组件中。

假设你有一个太阳系组件，它向你展示了所有的行星。所以你有一个查询来返回没有细节的行星，还有一个查询叫做planetDetails什么的。创建SolarSystem组件并用父查询包装该组件，然后其中的每个行星将加载另一个组件，并将planetID作为道具传递给该组件。在该组件上，包装planetDetails查询，并为查询取道具“PlanetID”。

我知道这不是最好的例子，希望能有所帮助。