4

I have an infinite scroll list. I recently updated to the latest Apollo client and noticed infinite scroll no longer works.

Upon deeper investigation. I noticed when I call fetchmore with the incremented skip, it causes the entire page to re-render. Any ideas?

Query:

   const {
      data,
      loading: queryLoading,
      fetchMore,
      error,
      networkStatus
    } = useQuery(SEARCH_PROFILES, {
      variables: { ...searchParams, skip: skip.current },
      fetchPolicy: "cache-first",
      notifyOnNetworkStatusChange: true
    });

FetchMore

 const fetchData = () => {
      ErrorHandler.setBreadcrumb("Fetch more profiles");
      skip.current =
        skip.current + parseInt(process.env.REACT_APP_SEARCHPROS_LIMIT);
      const intLimit = parseInt(process.env.REACT_APP_SEARCHPROS_LIMIT);

      if (hasMore.current) {
        fetchMore({
          variables: {
            searchType,
            long,
            lat,
            distance,
            ageRange,
            interestedIn,
            skip: skip.current,
            limit: intLimit,
            isMobile: sessionStorage.getItem("isMobile")
          },
          updateQuery: (previousResult, { fetchMoreResult }) => {
            if (!fetchMoreResult) {
              hasMore.current = false;
              return previousResult;
            } else if (
              fetchMoreResult.searchProfiles.profiles.length < intLimit
            ) {
              hasMore.current = false;
            }
            const newData = produce(previousResult, (draftState) => {
              if (draftState.searchProfiles.profiles) {
                draftState.searchProfiles.profiles.push(
                  ...fetchMoreResult.searchProfiles.profiles
                );
              } else {
                draftState.searchProfiles.profiles =
                  fetchMoreResult.searchProfiles.profiles;
              }
            });

            return newData;
          }
        });
      }
    };
3
  • For every change in react state, it does re-render the whole component but react smart enough to update the changes wherever required. You can read this article to avoid multipel re-renders
    – Naren
    Commented Oct 22, 2020 at 13:39
  • what was your previous apollo version and the new one you upgraded to?
    – diedu
    Commented Oct 23, 2020 at 23:09
  • 1
    could you provide an example on something like codesandbox? It's hard to give useful advice without more context.
    – kyle
    Commented Oct 26, 2020 at 19:57

1 Answer 1

1

Well, From your explanation, re-rendering is necessary since you're loading new content on while you scroll, but for entire page not to be re-rendered is what we're concerned here... below tips might help.

  1. extract the part of the page which needs to fetch data on scroll into a separate component, since it will be the only component which needs to be re-rendered
  2. wrap your extracted component with React.memo() so it doesnt re-render when there is no change on data.
  3. Make good use of life cycle hooks methods, they're the tools to manage on where or how to re-render

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.