Express + GraphQL + MongoDB 무한스크롤 만들기

처음이라면 하단의 포스팅 참고

https://velog.io/@mkh1213/Express-GraphQL-MongoDB-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-4

하단 링크의 포스팅에서 이어지는 내용

https://velog.io/@mkh1213/React%EB%A1%9C-%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EB%A7%8C%EB%93%A4%EA%B8%B0

폴더 구조

• graphql/userTypeDefs.js, resolvers/user.js를 주로 수정할 예정
  

화면에 데이터 넘겨주기 위한 코드 작성

• user.js에 함수 2개를 추가해 준다.
• getUsersInit함수는 20개씩 _id의 역순으로 뿌려준다.
• getUsers함수는 20개씩 _id의 역순으로 뿌려주지만, lastId값에 들어있는 timestamp값을 이용해 함수가 실행될 때마다 다음 20개를 가져오게 된다.

        async getUsersInit() {
            console.log("getUsersInit 실행!")
            let result;
            try {
                result = await User.find().sort({_id: -1}).limit(20);
            } catch (error) {
                console.log(`getUsersInit Error = ${error}`);
            }
            return result;
        },
        async getUsers(_, {lastId}) {
            console.log("getUsers 실행!")
            let result;
            try {
                if (lastId && !isValidObjectId(lastId)) throw new Error("invalid lastid");
                result = await User.find({_id: { $lt: lastId } }).sort({_id: -1}).limit(20);
            } catch (error) {
                console.log(`getUsers Error = ${error}`);
            }
            return result;
        },

• userTypeDefs.js의 type Query부분 코드 추가

    getUsersInit: [User]
    getUsers(lastId: String): [User]

• 데이터들이 배열이므로 User타입을 대괄호로 묶어준다.

무한스크롤은 서버쪽 코드가 많지 않으므로 마무리...

이어서

https://velog.io/@mkh1213/React%EB%A1%9C-%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EB%A7%8C%EB%93%A4%EA%B8%B0