provincial-silver

infinite scroll network 200 but undefined

I'm trying to implement infinite scrolling of chat content. The data result is 200. If you check the preview, you will see the following. However, when outputting to console.log, undefined is displayed. What's the problem? "react-query": "^3.39.3",

//API
export const getMessageList = async ({roomId, pageNum}: {roomId: string, pageNum: number}) => {
    console.log("roomId", roomId, "pageNum", pageNum);
    const token: string | undefined = Cookies.get("access_Token")
    const res: Response = await instance.get(`${process.env.NEXT_PUBLIC_API_URL}/chat/${roomId}?page=${pageNum}`, {
        headers: {
            'Authorization': `${token}`,
        },
    });
    if (!res.ok) {
        throw new Error('Failed to fetch data');
    }
    return res.json();
};

//Component
export default function Message({messages, roomId}:{messages: ContentType, roomId: string}) {

    const {
        data,
        fetchNextPage,
        hasNextPage,
        isFetching,
    } = useInfiniteQuery<any, any, [string, string, string], any>({
        queryKey: ['chat', 'messages', roomId],
        queryFn: ({ pageParam = 0 }) => getMessageList({ roomId, pageNum: pageParam }),
        initialPageParam: 0,
        getNextPageParam: (lastPage: any) => (lastPage.data?.length > 0 ? lastPage.page + 1 : undefined),
        staleTime: 60 * 1000,
        gcTime: 300 * 1000,
    });


    console.log(data)

    const {ref, inView} = useInView({
        threshold: 0,
        delay: 0,
    });

    useEffect(() => {
        if (inView) {
            !isFetching && hasNextPage && fetchNextPage();
        }
    }, [inView, isFetching, hasNextPage, fetchNextPage]);

    return (
...

//API
export const getMessageList = async ({roomId, pageNum}: {roomId: string, pageNum: number}) => {
    console.log("roomId", roomId, "pageNum", pageNum);
    const token: string | undefined = Cookies.get("access_Token")
    const res: Response = await instance.get(`${process.env.NEXT_PUBLIC_API_URL}/chat/${roomId}?page=${pageNum}`, {
        headers: {
            'Authorization': `${token}`,
        },
    });
    if (!res.ok) {
        throw new Error('Failed to fetch data');
    }
    return res.json();
};

//Component
export default function Message({messages, roomId}:{messages: ContentType, roomId: string}) {

    const {
        data,
        fetchNextPage,
        hasNextPage,
        isFetching,
    } = useInfiniteQuery<any, any, [string, string, string], any>({
        queryKey: ['chat', 'messages', roomId],
        queryFn: ({ pageParam = 0 }) => getMessageList({ roomId, pageNum: pageParam }),
        initialPageParam: 0,
        getNextPageParam: (lastPage: any) => (lastPage.data?.length > 0 ? lastPage.page + 1 : undefined),
        staleTime: 60 * 1000,
        gcTime: 300 * 1000,
    });


    console.log(data)

    const {ref, inView} = useInView({
        threshold: 0,
        delay: 0,
    });

    useEffect(() => {
        if (inView) {
            !isFetching && hasNextPage && fetchNextPage();
        }
    }, [inView, isFetching, hasNextPage, fetchNextPage]);

    return (
...

6 Replies

optimistic-gold•2y ago

code looks fine, put it in a codesandbox then I can help debug it oh, why are you using react-query and not @tanstack/react-query ?

magic-beige•2y ago

Also devtools can help 🙂

provincial-silverOP•2y ago

I wanted to use tanstack-query, but my team members refused because they had not used it before... This is Code Sandbox. But since this is my first time using it, I'm not sure if it works... Thank you so much for your help. https://codesandbox.io/p/sandbox/autumn-monad-xcj38v?file=%2Fsrc%2FApp.js%3A42%2C1

optimistic-gold•2y ago

tanstack query is just the next major version of react-query. It's the same library...

provincial-silverOP•2y ago

Of course I know! I am using it in my personal project. But... the project team members wanted v3. I also don't understand the other team members...

optimistic-gold•2y ago

what always helps is adding the devtools, then you can see that the query goes into error state because of

ReferenceError: Cookies is not defined\n at getMessageList (https://2x78gc.csb.app/src/App.js:23:19)\n

ReferenceError: Cookies is not defined\n at getMessageList (https://2x78gc.csb.app/src/App.js:23:19)\n

so it's this line:

const token = Cookies.get("access_Token");

const token = Cookies.get("access_Token");

not sure where Cookies is coming from but this doesn't work here's a fork of you sandbox with added devtools: https://codesandbox.io/p/sandbox/autumn-monad-forked-2x78gc?file=%2Fsrc%2FApp.js%3A11%2C22

Gaming

Programming

infinite scroll network 200 but undefined

Did you find this page helpful?