Better way to handle conditional query in apollo graphql react

Question

I am using @apollo/client and have a set of queries in a component, and I need to call them conditionally.

ex :

  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
  });

Right now this is sitting in my component, and it takes up around 100 lines alone. I have a few set of the component where the query to call depending on the user type, and I don't know how to make it cleaner.

Is there a way to split this logic somewhere in a clean way? or to handle this differently in graphql?

wrap into 'user data loader layer' - component above with switched queries (union type data passed into user) or just decompose it, different user component for each user type? — xadm, Dec 17 '20 at 12:40
no, I made a similar solution with a custom hook that take x query in and return a single value for loading/data. the returned type must be exactly the same. — Bobby, Apr 15 '21 at 07:11

Better way to handle conditional query in apollo graphql react

0 Answers0