How to correctly combine multiple pages sources when using the pure client?

[velidan]

Hi everyone. I want to implement an infinity pagination by using the pure urql client without any binding. Regarding the previous conversation about this topic I've implement combining the different page sources when the page variables changes (before) which means: fetch older portion of data.

I'm using combine, because I found merge operator is emitting data in the incorrect order so I can't recognize what is the latest pageInfo should I use to fetch next portion of data because the response from the first page comes after the second one.

Could someone, please, give to me some advice what is the best way to determinate the query name to get the appropriate data?
I mean: response.data[query_name]. eg. response.data.cardsQuery.pageInfo

I've found only one generic way that could be applicable for all the queries:
operation.operation.query.definitions[0].selectionSet.selections[0].name.value in this case I'll get the cardsQuery name or any other queries name

I'm wondering if it's a good way to get this name?

---

Also, the main question: what is the best way to correctly combine the sources? Because combine operator returns at the first call of it the array of combined sources and then the first element in that array will be an array of previous sources. Means:
I have page_1, I'm fetching page_2, combine returns [page_1_operation, page_2_operation] and it's fine. I'm storing this result and then, when I need to fetch page_3, I'm combining the first combined result with the new source and receiving this result:
[ [page_1_operation, page_2_operation], page_3_operation ].

when I fetch the page_4 the result will be even more complex:

[ [page_1_operation, page_2_operation], page_3_operation ], page_4_operation ] and it's going geeper for every next page

Okay, I will merge the operations in the first argument and then I'll merge this result with the last one, hovewer I'm wondering if it's a good approach? because on every next page the first argument becomes bigger and bigger and it will cause some linear complexity. Sure, I could add some caching etc. but it's again - another layer of complexity. So that's I'm wondering if I'm on the right way because, to be honest, I really confused

I'll appreciate any help and info!

Here is the code: (without merging things deeply if the first argument is the previously combinded sources result as I've just faced this stuff and currently trying to handle it)

class Subscr {
...
     counter = 0;

  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;

    prevQuery.unsubscribe();
    this.counter = 0;

    const mergedSource = pipe(
      combine(existingSource, newPageSource),
      map((combinedResult) => {
        const [operation_0, operation_1] = combinedResult;
        const queryName =
          operation_1.operation.query.definitions[0].selectionSet.selections[0]
            .name.value;

        let prevEdges;
        if (Array.isArray(operation_0)) {
          prevEdges = operation_0.reduce((acc, o) => {
            return acc.concat(o.data[queryName].edges);
          }, []);
        } else {
          prevEdges = operation_0.data[queryName].edges;
        }

        const currentEdges = operation_1.data[queryName].edges;

        const mergedEdges = prevEdges.concat(currentEdges);

        const finalOperation = {
          ...operation_1,
          data: {
            [queryName]: {
              ...operation_1.data[queryName],
              edges: mergedEdges,
            },
          },
        };

        console.log('>>> COUNTER <<<', this.counter);
        this.counter++;
        return finalOperation;
      })
    );

    const { unsubscribe } = pipe(mergedSource, subscribe(subscriber));

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

Another crucial problem in this code: despite my unsubscribe from the previous combined source before the new one combine every time I fetch a new page, the amount of map calling is increasing linearly. Counter on every new mergePages shows bigger value. Don't know what to do with that

P.s. I've tried relayPagination, it returns some entities in the incorrect order so that's why I decided to implement this manually