Apollo-client: updateQuery merging different data when changing query while fetchMore is not yet finished

[denichodev]

Hi, I've read https://github.com/apollographql/apollo-client/issues/2499 and I don't know if it this issue I'm having is related or not.

I am having this issue where prev and result on updateQuery(prev, result) having different context on the data to merge. It happens when I changed query (changing search term) while fetchMore is not yet finished, resulting in items with different query being merged.

How to reproduce the issue:
Case:

1. I am currently on search result page with term pillow already have some data, and calling fetchMore.
2. Before fetchMore is done, I quickly changed the term with iphone.
3. The iphone search query data are merged in updateQuery with pillow fetchMore result.

Sorry, I am currently unable to provide the repository to reproduce this. I will provide it later if it's necessary.

Intended outcome:
I think the intended outcome is obvious, the pillow fetchMore result should be merged according to its search term (fetched earlier in step 1).

This is the code I've been using:

fetchMore: (nextPage = 0, listview, additional_params) => {
    return data.fetchMore({
      variables: {
        page: nextPage,
        per_page: listview ? LIST_VIEW_PER_PAGE : GRID_VIEW_PER_PAGE,
        additional_params,
      },
      updateQuery: (prev,  res) => {
        console.log('prev: ', prev); 
        console.log('res: ', res);
        if (!res.fetchMoreResult) {
          return prev;
        }

        const newData = res.fetchMoreResult.search_results_product;

        return {
          ...prev,
          search_results_product: {
            ...prev.search_results_product,
            total_data: newData.total_data,
            items: [...prev.search_results_product.items, ...newData.items],
          },
        };
      },
    });
  },

Actual outcome:
The data from pillow fetchMore are merged in updateQuery with iphone, resulting in wrong search result displayed.

Weirdly, the res.variables in updateQuery(prev, res) showing that the query is for iphone instead of the actual query for fetchMore, which is pillow.

Version

• [email protected]

[protyze]

I'm experiencing the same behaviour. When the variables for the query are changed while fetchMore is in flight, the results of "fetchMore" (for the old variables) will be merged with the results of the query with current variables.

Example: You have a list with 2 tabs (changing tabs will change the "category"-variable for the query). So fetchMore is in progess while having tab 1 selected (category 1). Now the users switches to tab 2 and later the fetchMore results for tab 1 will be appended to tab 2.

The updateQuery-Function should provide the "previosResults" for the initial variables so we can merge accordingly.

[denichodev]

Is there any update regarding this issue?

[mefjuu]

Any chances to fix that 5-months old issue? It seems to be quite significant disfunction.

(a bit funny situation, considering an activity of Apollo team on various React confs and theirs efforts to promote Apollo integrations...)

[jakwuh]

Should be fixed by https://github.com/apollographql/apollo-client/pull/4640

[dylanwulf]

@jakwuh Thank you. Hopefully that gets reviewed soon. Do you know of any workarounds I could use in the meantime?

[jakwuh]

@dylanwulf yes, you can implement your own graphql enhancer

[hogiyogi597]

@jakwuh I am not quite sure I follow how to implement a custom graphql enhancer to solve this problem. Maybe I am too deep into trying different implementations to see clearly but could you give a little insight on how this could be accomplished?

[glenn-p-ryan]

Any update on the status of this issue?

[wosephjeber]

I'm also very interested in the progress of this. My company has been struggling with bugs for some time now caused by this issue, and we've been unsuccessful in multiple attempts to work around it. Any update on if/when #4640 might be merged?