Programatically refresh the exact same query? (keep same page)

[WGriffing]

Use case:

• My web app allows people to launch a modal from the ReactiveList rendered items. Within this modal, users can make changes to an individual result and save.
• When a change is saved, it is persisted to Elasticsearch.
• I want to simply refresh the current query.
• Nothing should change, including the current page number, except that the results should refresh.
  • If the change causes the edited result to no longer be included in the query, it should no longer be returned.
  • If the change causes the number of hits in the query to decrease such that the total number of pages goes down, it's reasonable to limit the currentPage to the last page. But currentPage should only change in this one case.

I am currently using something like #1173 and it almost works, but it has a fatal flaw for my application.

If the user is making edits on page 25 out of 75 (we currently have ~750 items in our result set) and they save a change, then updating the dummy refresh query causes the pagination to reset back to page 1 (from=0). The user then has to manually page back to 25 to continue where they left off. That's a lot of extra clicks for them and I have a user story to solve this problem.

I understand why the behavior exists. In general, if you change search terms it would be expected that you start over from page 1. Consequently, my dummy filter is likely not the best way to accomplish this.

I suspect I need to use a ref prop and lift some method/function (from ReactiveList? or ReactiveBase?) and invoke it myself (while eliminating the dummy filter component entirely) to accomplish what I'm after, but I've been struggling for a few days and thought I would reach out for help rather than continue to spin my wheels.

If it helps, I constructed a codesandbox that replicates the issue I'm experiencing with the the dummy filter: https://codesandbox.io/s/compassionate-blackwell-h7g943

To reproduce:

1. Change page away from page 1 to page N.
2. Click any of the results (this simulates a user opening my modal, and saving changes in the real app).
3. Observe that you are sent back to page 1.
   • Sometimes this actually triggers a too many hooks error and the app will crash. When I observe this locally, the URL param oscillates between 1 and whatever page N you selected in step 1. I have not identified the culprit, but I don't think it's worth investigating as there must be a better solution than the dummy filter method I'm using today.

Any help or suggestions would be greatly appreciated. Thanks.

[WGriffing]

This may be a possible solution:

  useEffect(() => {
    const {
      queryLog,
      updateQuery,
      setQueryOptions,
      componentId,
      currentPage,
    } = listRef?.current?.props;

    if (lastRefreshTime && setQueryOptions && queryLog) {
      const { query, ...queryOptions } = queryLog;
      setQueryOptions(componentId, queryOptions, true);
      updateQuery(
        { componentId, query, value: currentPage, URLParams: false },
        true
      );
    }
  }, [lastRefreshTime, listRef?.current]);

elsewhere:

   const listRef = useRef();

// lines omitted

  <ReactiveList
    // other Props unchanged
    ref={listRef}
   // other Props unchanged
  />