title: Using fetchMore to fetch ALL data on component mount
body: <p>I have a situation where I need to fetch e.g. all articles posted by a user when a component is mounted. To get a user's articles I am using the following query:</p>
  
  <pre><code>const GET_USER_ARTICLES = gql`
      query getUserArticles($id: ID, $numArticles: Int!, $cursor: String) {
          user(id: $id) {
              id
              articles(first: $numArticles, after: $cursor, orderBy: "-created", state: "enabled") @connection(key: "userArticles") {
                  edges {
                      node {
                          name
                      }
                  }
                  pageInfo {
                      endCursor
                      hasNextPage
                  }
              }
          }
      }
  `;
  </code></pre>
  
  <p>If there is a next page I want to keep fetching more articles until I have ALL of them. Up until now I haven't had the need to do anything like this (normally I have a button the user can click "Load more" to fetch more articles for example, but now need to fetch everything without a user interacting with anything), so I'm not sure what the best way to go about this is.</p>
  
  <p>An example of the query in React:</p>
  
  <pre><code>const PAGE_SIZE = 10;
  
  const { data, loading, fetchMore } = useQuery&lt;UserArticlesData, UserArticlesVariables&gt;(
      GET_USER_ARTICLES,
      { variables: { id: userId, numArticles: PAGE_SIZE, cursor: null } },
  );
  </code></pre>
  
  <p>I am a little lost how I can use the <code>fetchMore</code> to keep fetching until there aren't any more pages left, while also showing a loading state to the user. I'm also not sure this is the best way to go about this in the first place, so any suggestions are more than welcome!</p>