I have stumbled upon this problem a few times now. I need a way for the component to be able to track changes in the URL params and refetch data depending on it. For example, when the user searches "q=searchTerm" is applied. When paginating, "page=pageNumber" is applied and so on. It is easy to implement with just one parameter in a useEffect but when I have multiple such as search, sort, sort direction my knowledge of this is limited.

The code right now sort of works but if you are on say page 3 in pagination and then you search both effects get triggered because I want the pagination to go back to 1 after searching. It is not ideal.

I can't really find any good articles which deal with a more advanced version as they usually just demo the concept.

Can anyone recommend a good approach of dealing with multiple search parameters and how to efficiently update data?

    fetchMore({
      variables: {
        input: {
          offset: getOffset(MAX_PRODUCT_REVIEW_LIMIT, activePage),
          limit: MAX_PRODUCT_REVIEW_LIMIT,
          q: debouncedSearchTerm,
        },
      },
    });
  }, [activePage, fetchMore, debouncedSearchTerm]);

  useEffect(() => {
    Router.replace({
      query: {
        ...Router.query,
        q: debouncedSearchTerm,
        page: 1,
      },
    });
  }, [debouncedSearchTerm]);