graphql, split huge query to small queries

Question

I am using https://developer.github.com/v4/

And I have a huge query like this:

query ($login: String!, $first: Int, $after: String) {
  user (login: $login){
    avatarUrl
    login
    name,
    followers(first: $first, after:$after) { 
      edges{
        cursor
        node{
          id
          name
          login
          avatarUrl
        }
      }
      totalCount
    },
    repositories(first: $first) {
      edges{
        cursor
        node{
          id
          name
        }
      }
      totalCount
    }
  }
}

But I think it's bad to query huge data from server.

I have followers and repositories pages. So I think split this huge query to small queries is better.

Here is small queries:

followers query:

query($login: String!, $first: Int, $after: String) {
    user(login: $login) {
      followers(first: $first, after: $after) {
        edges {
          cursor
          node {
            id
            name
            login
            avatarUrl
          }
        }
        totalCount
      }
    }
  }

repositories query:

query($login: String!, $first: Int, $after: String) {
    user(login: $login) {
      repositories(first: $first, after: $after) {
        nodes {
          id
          name
        }
        totalCount
      }
    }
  }

user query:

query($login: String!, $first: Int) {
    user(login: $login) {
      avatarUrl
      login
      name
    }
  }

Am I correctly? Is it necessary to do this? What's the best practice this situation? Is there any documentation for teaching people how to handle this or told people the best practice?

Answer 1

You can spit your queries into Fragments and in that way you would still only trigger one request and have smaller "queries". Something like this:

Fragment for followers:

fragment followers on User {
    followers(first: $first, after: $after) { 
      edges{
        cursor
        node{
          id
          name
          login
          avatarUrl
        }
      }
      totalCount
    },
}

Fragment for repositories:

fragment repositories on User {
  repositories(first: $first) {
      edges{
        cursor
        node{
          id
          name
        }
      }
      totalCount
    }
}

Put them all together in the query:

query ($login: String!, $first: Int, $after: String) {
  user (login: $login){
    avatarUrl
    login
    name
    ...followers
    ...repositories
  }
}