title: Trigger same query multiple times with apollo client fetchMore Apollo Client and append the data
body: <p>I converted a class component into a function component to make use of React Hooks. The graphQl query is called as follows:</p>
  <pre><code>const { data, error, loading, fetchMore } = useQuery(getAll, {
              variables: { 
                  code: props.code,
                  type: props.type,
                  page: 0 
              }
          });
  </code></pre>
  <p><code>fetchMore</code> function is what I'm looking for. I checked several tutorial, they all implement the <code>fetchMore</code> function on <em>onClick</em> trigger.</p>
  <p>My question is:</p>
  <p>Is it possible to call <code>fetchMore</code> without trigger an event? So that it's called conditionally when a variable is set?</p>
  <p><strong>UPDATE 1</strong> <br/></p>
  <p>As suggested I tried the <code>useEffect</code> hook. Here is the code:</p>
  <pre><code>useEffect(() =&gt; {
          if(data != null) {
              const { nextLink } = data.list.nextLink;
  
              if(nextLink !== []){
                  fetchMore({
                      variables: { 
                          code: props.code,
                          type: props.type,
                          page: page+1  
                      },
                      updateQuery: (prevResult, { fetchMoreResult }) =&gt; {
                        fetchMoreResult.list = [
                          ...prevResult.list,
                          ...fetchMoreResult.list
                        ];
                        return fetchMoreResult;
                      }
                  });
              }
          }
      });
  </code></pre>
  <p>However it calls the query only once. How can I trigger that query multiple times until <em>nextLink</em> is not empty? And then update the results?</p>
  <p><strong>UPDATE 2</strong> <br/></p>
  <p>After some work I'm able to call all the pages and fetch the data. Here is what I did.</p>
  <p>I added the <em>page</em> field in the backend query, which is used as a variable to be passed back and forth to the query calls. Moreover, this page variable is increased at each call. Also, the fetchmore function is called only when <em>nextLink</em> is empty. However, currently the page display only the last page results, since the new result replace the old data.</p>
  <p>Here is the code:</p>
  <pre><code>let [hasNext, setHasNext] = useState(true);
      useEffect(() =&gt; {
              if(data != null) {
                  const { nextLink, page } = data.list;
                  let isNext = (nextLink !== &quot;&quot;) ? true : false;
                  setHasNext(isNext);
      
                  if(hasNext){
                      const { data } = fetchMore({
                          variables: { 
                              code: props.code,
                              type: props.type,
                              page: parseInt(page)
                          },
                          updateQuery: (prevResult, { fetchMoreResult }) =&gt; {
                              fetchMoreResult = {
                                  ...prevResult,
                                  ...fetchMoreResult,
                              };
                              return fetchMoreResult;
                          }
                      });
                  }
              }
          });
  </code></pre>
  <p>The <em>spread operator</em> doesn't seem to work. How can I append the new data fetched to the old results?</p>