Question

所以一般来说，使用apollo react和GraphQL查询或改变数据没有问题。但有一点我不明白：假设我有一个查询得到任意实体的Id，如下所示：

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

baseNodeQuery是一个自定义函数，它使用一些参数来使用gql（）准备查询。但无论如何，在我的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查询时，我收到的错误是我没有返回有效的反应组件。那么我该怎么做呢？

提前致谢！

Answer 1

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

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

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

Answer 2

在return JSX之前，在EmploymentReferencePresetEntity中进行和解决第二个调用可能会达到您的目的。像这样：

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

  ... make and resolve your second query here like...
  const secondQueryResult = await secondQuery(nodeQuery)

  return (
    <div>
      //do something with secondQueryResult
    </div>
  )
};

使用React中的GraphQL与先前查询中的数据查询数据

2 个答案: