Try to infinite scroll pagination

Questions and Answers
17

sure :

//Initial pagination states:

 `   const [Skip, setSkip] = useState(10);
        const [limit, setLimit] = React.useState(10);
      const [starte, setStarte] = React.useState(0);

So I use Usequery from Apollo which allows me to use the fetch more function :

    const {
      data: data_next_drops,
      loading: loading_next_drops,
      error: error_next_drops,
      fetchMore: fetchMoreNext,
     refetch: refetchNext,
  } = useQuery(GET_ALL_NEXT_DROPS, {
  variables: {
    date: date,
    limit: limit,
    start: starte,
    resellIndex: resellFilter,
    brandCategorieName: brandFilter
},
  });

then I just need to create that function like this :

 const loadMore = async () => {
    setLoading(true);
    fetchMoreNext({
      variables: {
        date: date,
        limit: 10,
        start: Skip,
      },
      updateQuery: (preveResult, { fetchMoreResult }) => {
        setSkip(Skip + limit);
        fetchMoreResult.drops = [
          ...preveResult.drops,
          ...fetchMoreResult.drops,
        ];
//It copy the previous result with the new one
        setLoading(false);
        return fetchMoreResult;
      },
    });
  };
1 Like