Axios with Credentials and React Infinity scroll

I learned something useful today, so I'm writing it down.

First, I learned that when a parameter value is undefined, axios leaves the parameter itself out of the request.

Second, I learned about Axios withCredentials. withCredentials is one of the options used in Axios.

This option decides whether credentials are included in an HTTP request when it's sent.

Credentials here mainly means authentication information such as cookies.

Normally, under the Same Origin Policy, the browser doesn't automatically include cookies in requests to a different domain.
But if you set withCredentials to true, Axios includes credential information such as cookies in the request.

I'm going to use react-infinity scroll tomorrow, so I wrote some example code from what I remember of using it before.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36import React, { useState } from "react";
import InfiniteScroll from "react-infinite-scroll-component";

const ScrollTest = () => {
  const [items, setItems] = useState(
    Array.from({ length: 20 }, (_, index) => index)
  );

  const fetchMoreData = () => {
    setTimeout(() => {
      setItems((prevItems) =>
        prevItems.concat(
          Array.from({ length: 20 }, (_, index) => index + prevItems.length)
        )
      );
    }, 1500);
  };

  return (
    <div style={{ fontSize: "2.5rem" }}>
      <h1>Infinity Scroll Example</h1>
      <InfiniteScroll
        dataLength={items.length}
        next={fetchMoreData}
        hasMore={true}
        loader={<h4>Loading...</h4>}
      >
        {items.map((item, index) => (
          <div key={index}>{item}</div>
        ))}
      </InfiniteScroll>
    </div>
  );
};

export default ScrollTest;

I made the font-size bigger because when the numbers are small, they don't go past the body element, so no scroll appears and it doesn't run.

So as long as I know this concept, I think I can handle paging anywhere.