How to correctly combine two sources for the paginated query subscriptions?

[velidan]

Hi guys, I work with the relay pagination query and I use urql client API manually to subscribe to the queries.

When the first query with the pagination arguments happens I create a subscription to the query and store the subscription in the cache. When the second query with other pagination arguments happens I get the subscription source from the cache. Then I create a new subscription to the query with the new pagination arguments and combine it with the previous subscription source and the unsubscribe from the first source.

The first pagination query:

{
    "first": 5,
    "ownerId": "638f7d10f0178b1fe4db206d"
}

the second pagination query:
{
    "first": 5,
    "after": "eyJjcmVhdGVkQXQiOiIyMDIzLTAzLTE2VDIwOjI4OjEwLjkyOFoifQ",
    "ownerId": "638f7d10f0178b1fe4db206d"
}

It works fine and in the subscription I receive the array with the resopnses from both queries

Like [responseQueryA, responseQueryB]

I'm processing it and generating an object which contains the combined data from both queries: combinedResult object

The problem appears when appears the 3rd query with other pagination parameters.
I'm following the same flow so I get the previously combined source from the cache which contains the responses from the first and the second query and combine it with the new query source.

In the response I receive an array where the first argument is the combined response from previous source
[ [responseQueryA, responseQueryB], responseQueryC]
and for every new query things become more and more nested.

For example: if there will be added a query subscription C so it will become:
[ [ [responseQueryA, responseQueryB], responseQueryC], responseQueryD ]

I tried to use merge but it works worster than combine because merge triggers subscription for every query subscription output. So if there will be existing sources for subscriptions: A, B and I will add C subscription -> it will trigger subscriber 3 times for every source while combine will trigger only 1 time with all the results.

I'm wondering what is the best way to handle it?
I'll appreciate any input/info.

Kind regards!

Here is my merging code. If you need something more: please, let me know and I'll be glad to add it here.

import { Source, combine, map, pipe, subscribe } from 'wonka';
....
private mergePages(gqlClient: Client, params: OperatorOptiions) {
    const { subscriber, gqlQuery, variables, queryName } = params;
    const newPageSource = gqlClient.query(gqlQuery, variables);
    const prevQuery = this.registry[queryName];
    const existingSource = prevQuery.source;

    const mergedSource = combine(existingSource, newPageSource)
      
    prevQuery.unsubscribe();


    const { unsubscribe } = pipe(mergedSource, map((res => {
      const [first, second] = res;

      const queryKey = Object.keys(first.data)[0];
      const firstData = first.data[queryKey];
      const secondData = second.data[queryKey];

     // Making `combinedResult` object
      const combinedEdges = firstData.edges.concat(secondData.edges);
      const pageInfo = {
        ...firstData.pageInfo,
        ...secondData.pageInfo,
        startCursor: firstData.pageInfo.startCursor,
        endCursor: secondData.pageInfo.endCursor,
        count: firstData.pageInfo.count + secondData.pageInfo.count
      };

      const response = {
        data: { [queryKey]: { edges: combinedEdges, pageInfo } },
        originalCombinedResponse: res
      }


      return response;
    })), subscribe(subscriber));

    this.registry[queryName] = {
      variables,
      unsubscribe,
      source: mergedSource,
    };
  }

P.S. This is the solution for this post: