reactjs - 在 apollo graphql react 中处理条件查询的更好方法

Question

我正在使用@apollo/client并且在组件中有一组查询，我需要有条件地调用它们。

前任 ：

  const { data: userTypeOneData, loading: userTypeOneLoading, error: userTypeOneError } = useQuery<
    UserTypeOneQuery,
    UserTypeOneQueryVariables
  >(USER_ONE_QUERY, {
    variables: {
      parameterXXX: xxx
    },
    fetchPolicy: 'cache-and-network',
    skip: !isUserTypeOne
  });

  const { data: userTypeTwoData, loading: userTypeTwoLoading, error: userTypeTwoError } = useQuery<
    UserTypeTwoQuery,
    UserTypeTwoQueryVariables
  >(USER_TWO_QUERY, {
    variables: {
      parameterYYY: yyy
    },
    fetchPolicy: 'cache-and-network',
    skip: !isUserTypeTwo
  });

  const { data: userTypeThreeData, loading: userTypeThreeLoading, error: userTypeThreeError } = useQuery<
    UserTypeThreeQuery,
    UserTypeThreeQueryVariables
  >(USER_ONE_QUERY, {
    variables: {
      parameterZZZ: zzz
    },
    fetchPolicy: 'cache-and-network',
    skip: !isUserTypeThree
  });

现在，它位于我的组件中，仅占用大约 100 行。我有几组根据用户类型调用查询的组件，我不知道如何使它更干净。

有没有办法以一种干净的方式将这个逻辑拆分到某个地方？或者在graphql中以不同的方式处理这个？

标签： reactjsgraphqlapollo-client