reactjs - 如何使用 react-apollo 使用相同的查询进行多个 graphql 查询？

Question

我有一个 graphql 端点:QueryDataForOptions
我想根据组件的 options 多次调用它支柱。
可能有任意数量的选项。

我想做这样的伪代码，但钩子(Hook)的规则不允许这样做:

const MyComponent = (options) => {
  options.forEach(option => {
    const {data, loading, error} = useQuery(QueryDataForOptions, {variables: {option}})
  })

}

我也考虑过这个伪代码，但我不确定如何处理 data被覆盖:

const MyComponent = (options) => {
  const [getOptions, {data, loading, error}] = useLazyQuery(QueryDataForOptions)
  options.forEach(option => {
    getOptions({variables: {option}})
  })
}

我知道正确的解决方案是更改 graphql 端点，但我想在客户端进行此更改。

如何多次调用同一个查询？

Answer 1

Apollo 没有公开一个钩子(Hook)来同时查询多个操作。但是，GraphQL 支持在每个操作中查询多个根字段。这一事实与别名字段的能力相结合，意味着您可以在一个请求中获取所有必需的数据。

在编写查询时，您通常应该远离字符串插值，但在这种情况下，我们需要使用它。

const MyComponent = (options) => {
  const query = gql`
  query SomeNameForYourOperation (
    ${options.map((option, index) => `$opt${index}: SomeInputType!`).join('\n')}
  ){
    ${options.map((option, index) => `
      alias${index}: someRootField(someArgument: $opt${index}) {
        ...SomeTypeFragment
      }
    `).join('')}
  }

  fragment SomeTypeFragment on SomeType {
    someField
    someOtherField
  }
  `

  const variables = options.reduce((memo, option, index) => {
    return { ...memo, [`opt${index}`]: option }
  }, {})

  const { data, loading, error } = useQuery(query, { variables })

  if (data) {
    // data.alias0
    // data.alias1
    // etc.
    // You can also iterate through options again here and access the
    // appropriate alias by the index
  }
}

这看起来有点复杂，但实际上非常简单。我们通过迭代 options 来生成变量定义。 (我们最终得到 $opt0 、 $opt1 等变量)。然后我们再次遍历选项以生成根的选择集。对于每个选项，我们将相同的字段添加到我们的查询中，但我们将其别名(如 alias0 、 alias1 等)，然后将不同的变量传递给该字段的参数。最后，我们利用片段来保持结果查询的大小可管理。

我们还必须通过 variables反对 useQuery与我们生成的变量定义相匹配，所以我们 reduce options将数组放入具有适当命名属性的对象中。

当然，您需要更改上面的示例以包含特定于您的查询的类型、字段和参数。最终结果是您有一组 data , loading和 error变量。查询加载后，您可以在适当的别名( alias0 等)下访问每个结果。