Blog

TypeScript firebase user CRUD

Userはアプリケーション内で、よく使う。基本的に使うものをまとめておく

userはObservableにアプリ内で利用するものと、Promise型を用意しておくと何かと都合がいい

Rxfireは必需品

  • idはfirebaseに保存する際、必要でないため、extendsして、別のクラスにしておくと良い
  • firebaseへの保存はIUserEntityクラスを利用する
  • ただアプリ内ではidは必要なのでAppUserを利用する

IUserEntity

export interface IUserEntity {
  name: string
  kana: string
  email: string
  role: RoleType
  note: string
  companyId: string
  createdAt: firebase.firestore.Timestamp
  updatedat: firebase.firestore.Timestamp
}

AppUser

export interface AppUser extends IUserEntity {
  id: string
}

CRUDと頻繁に利用するcurrentUser

import { db, getCurrentFirebaseUser } from '~/plugins/firebase'
//rxfireは大切
import { doc } from 'rxfire/firestore'
import { firstValueFrom, map, Observable } 


//documentをget
 private getRef(userId: string): firebase.firestore.DocumentReference {
    return db.collection(UserEntity.collectionName).doc(userId)
  }

//collectionをget コレクション配下のsubcollectionすべてをgetする時
  private getCollection(): firebase.firestore.CollectionReference {
    return db.collection(UserEntity.collectionName)
  }

//observableなuserをget Rxjsの命名規則で user$としておく
  getUser$(userId: string): Observable<AppUser> {
    const user$ = doc(this.getRef(userId))
    user$.pipe(
      map((snapshot) => {
        const user = snapshot.data() as IUserEntity
        const appUser = { ...user, id: user$.id }
        return appUser
      })
    )
  }

////observableでないuserをget firstValueFromを使うだけ
  getUser(userId: string): Promise<AppUser> {
    return firstValueFrom(this.getUser$(userId))
  }

//currentUserはアプリの中で利用するのでobservableにしておく
  getCurrentUser(userId: string): Observable<AppUser> {

//getCurrentFirebaseUserはfirebaseライブラリの関数
    return this.getUser$(getCurrentFirebaseUser.uid)
  }


//user追加 firebaseのdocumentにsetするだけ
  addUser(userId: string, data: IUserEntity): Promise<void> {
    return this.getRef(userId)
      .set(data)
      .then((_) => {
        console.log('success add user')
      })
  }

//update Partialを利用 Partialはクラスのプロパティすべてをオプショナルにしてくれる
  updateUser(
    userId: string,

////IUserEntityの必要なものだけdataにいれて渡しなさい。 しかし、プロパティのupdatedAtはPick(必要ですよ)
    data: Partial<IUserEntity> & Pick<IUserEntity, 'updatedAt'>
  ) {
    return this.getRef(userId).update(data)
  }

//削除
  deleteUser(userId: string): Promise<void> {
    return this.getRef(userId).delete()
  }

アドバイスあればお願いします。

Partialについて

ご連絡、質問は、Facebook よりお願いいたします。

コネクト facebook page