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

Question

我有一个graphql端点：QueryDataForOptions

我想根据组件的options属性多次调用它。可能有许多选项。

我想做这样的伪代码，但是钩子规则不允许这样做：

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

而不是对每个option进行查询，您应该一次查询所有这些。因此，您的查询将采用我认为将是每个选项的ID的数组，然后返回一个数组，即每个选项的ID。如果您有50个选项，那么一个查询比尝试为每个选项触发一个查询要快得多，而且效果更好。

另一个不太可取的选择是为每个选项创建一个组件，以触发其自身的查询。所以像

const MyComponent = (options) => (
  options.forEach(option => <OptionComponent option={option} />)
)

const OptionComponent = ({ option }) => {
  const [getOptions, {data, loading, error}] = useLazyQuery(QueryDataForOptions);

  if (loading) return 'Loading...';

  return (
    // whatever you want for each option
  );
}

Answer 2

Apollo不会公开钩子来同时查询多个操作。但是，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等）访问每个结果。