Fix variables for loadMore after refetch in usePaginationFragment

[dragoshomner]

The scope of this PR is to fix loadMore function from usePaginationFragment hook after we refetch data with different variables.

Problem

If we load more data (using loadNext), it works properly and it returns next page. If we need to refresh data with different variables, we need to call refetch function (retrieved from usePaginationFragment) with the new variables. However, even if the first page is loaded correctly, loading next page with the new variables breaks and it ignores the new variables completely.

To repro this scenario, I added a new button which changes the alphabetical order of todos (asc and desc). On click, it calls refetch with the new order. The first page is ordered correctly, but the next ones ignore the variable and we ended up with the following scenario (first page is desc and the second one is asc - for beter readablitiy I prepended an index):

Solution

In the previous implementation, refetch function was returned from useCompiledRefetchableFragment and the variables passed to that function (variablesSubset) weren't stored anywhere in the pagination hook, so loadMore couldn't access the previously passed data. In this proposed solution, we wrap the function and store data using the native useRef. These variables are passed later to loadMore and the next page has access to the previous variables (from the first page).

This solution doesn't touch other hooks and doesn't interfere with refetch function from useCompiledRefetchableFragment. Here is how it looks like after the changes:

TODO (before merge):

• [x] Clean code
• [x] Clear example app UI
• [x] Update tests