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関数はidの逆順で20個分布する.
  • getUsers関数はidの逆順で20個分布していますが、lastId値のタイムスタンプ値を使用して関数を実行するたびに、以下の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]
  • データは配列されているので、ユーザタイプは括弧で囲まれている.
  • 無限スクロールはサーバ側コードがあまりないので終了...