Handle progressive disclosure on frontend with Apollo Client

Question

In my project, we plan to implement a progressive disclosure (displaying some part of UI data if the user has permissions). Basically, we are using react + apollo client with hooks + graphqltag.

But the problem is no that how to hide some part of UI but how to split queries by permissions. So right now for pages, we create a single query containing many "subqueries" for different kinds of data. For example :

export const GET_DATA_X= gql`
  query getDataX(
    $applicationId: ID!
    $dateFrom: String!
    $dateTo: String!
    $displayMode: String!
  ) {
    applicationShipDates(
      applicationId: $applicationId
      dateFrom: $dateFrom
      dateTo: $dateTo
      displayMode: $displayMode
    ) {
      periodStartDate
      dates
    }
    graphStatistics(
      applicationId: $applicationId
      dateFrom: $dateFrom
      dateTo: $dateTo
    ) {
      totalVisits
      totalConversions
      conversionRate
    }
  }
`;

And right now each part of this query will be available if the user will have permission. On the backend side, it's already handled. We throw null/empty array and error. But IMO we shouldn't even ask for this part of the data. And that is the question. Do you have any suggestions on how to do this with an apollo client?

Right now I have two ideas on how to do that:

1. Split queries into single and make a few API calls if the user has permission, otherwise skip it
2. Write a custom function where I will pass as a prop array of objects, including query definition and query required permissions. I will filter this array by permission and from small query definitions like applicationShipDates or graphStatistics i will create a big query like getDataX which will includes few "subqueries"

Answer 1

Like @xadm mentioned directives will be the best solution.