Kevin Powell - Community•3y ago

Lazy loading list from API

i am trying to list the items from api in cards, api is paginated, so i have used my senior's code where he has created custom hook to fetch data whenever the last card comes using intersection observer, the observer working fine, the state which is used for page_number is updating properly but when i call the next set of data, instead of latest state value, old value is going, not sure why that is happening, eg. initial page number is 1, after fetching data , state changed to 2(checked with useEffect), once the last card comes, when i hit api again , its going as 1 instead of 2. can anyone help me regarding this.

1 Reply

stealthyOP•3y ago

 const onNext = (req, number, clear = false) => {
    console.info("coming here", page_number);
    getGamePlayerGameList(
      {
        pagination: {
          items_per_page,
          page_number: number ? number : page_number,
        },
        ...req,
      },
      clear
    );
  };

 const onNext = (req, number, clear = false) => {
    console.info("coming here", page_number);
    getGamePlayerGameList(
      {
        pagination: {
          items_per_page,
          page_number: number ? number : page_number,
        },
        ...req,
      },
      clear
    );
  };

  const [page_number, setPageNumber] = useState(1);
  const [isDone, setDone] = useState(false);
  const [loading, setLoading] = useState(preLoad);
  useEffect(() => {
    console.table({ page_number });
  });
  const getGamePlayerGameList = async (
    request,
    clear = false,
    successCB = cb,
    errorCB = cb
  ) => {
    setLoading(true);
    console.table({ ...request });
    try {
      const { data } = await graphHandler().invoke(
        GET_GAME_PLAYER_GAME_LIST_GQL,
        { ...request },
        1,
        false,
        true
      );
      if (
        data &&
        data.getGamePlayerGameList &&
        data.getGamePlayerGameList.game_player_list &&
        data.getGamePlayerGameList.game_player_list.length > 0
      ) {
        const { pagination } = data.getGamePlayerGameList;

        const result = data.getGamePlayerGameList.game_player_list.map(
          (data) => {
            return { ...data.game_player, ...data.game };
          }
        );
        let val = [...(!clear ? gamePlayerGameList : []), ...result];
        setGamePlayerGameList(val);
        successCB(val);

        if (
          request.pagination &&
          Math.ceil(pagination.total_count / items_per_page) ==
            request.pagination.page_number
        ) {
          console.log("stopped the page_number");

          setDone(true);
        } else {
          console.log("updating the page_number");
          setPageNumber(request.pagination.page_number + 1);
        }
      } else {
        errorCB();
        reset();
        setDone(true);
      }
      setLoading(false);
    } catch (error) {
      console.error("getGamePlayerGameList Error", error);
      errorCB(error);
      setGamePlayerGameList([]);
      setLoading(false);
    }
  };

  const [page_number, setPageNumber] = useState(1);
  const [isDone, setDone] = useState(false);
  const [loading, setLoading] = useState(preLoad);
  useEffect(() => {
    console.table({ page_number });
  });
  const getGamePlayerGameList = async (
    request,
    clear = false,
    successCB = cb,
    errorCB = cb
  ) => {
    setLoading(true);
    console.table({ ...request });
    try {
      const { data } = await graphHandler().invoke(
        GET_GAME_PLAYER_GAME_LIST_GQL,
        { ...request },
        1,
        false,
        true
      );
      if (
        data &&
        data.getGamePlayerGameList &&
        data.getGamePlayerGameList.game_player_list &&
        data.getGamePlayerGameList.game_player_list.length > 0
      ) {
        const { pagination } = data.getGamePlayerGameList;

        const result = data.getGamePlayerGameList.game_player_list.map(
          (data) => {
            return { ...data.game_player, ...data.game };
          }
        );
        let val = [...(!clear ? gamePlayerGameList : []), ...result];
        setGamePlayerGameList(val);
        successCB(val);

        if (
          request.pagination &&
          Math.ceil(pagination.total_count / items_per_page) ==
            request.pagination.page_number
        ) {
          console.log("stopped the page_number");

          setDone(true);
        } else {
          console.log("updating the page_number");
          setPageNumber(request.pagination.page_number + 1);
        }
      } else {
        errorCB();
        reset();
        setDone(true);
      }
      setLoading(false);
    } catch (error) {
      console.error("getGamePlayerGameList Error", error);
      errorCB(error);
      setGamePlayerGameList([]);
      setLoading(false);
    }
  };

onNext function only not working as i want what could be the issue can anyone help me on this

Gaming

Programming

Lazy loading list from API