8.FileUpload(typeDefs, resolvers)

김종민·2022년 4월 22일
0

insta-backend

목록 보기
7/37

1. typeDefs

import { gql } from 'apollo-server'
import { GraphQLUpload } from 'graphql-upload'

export default gql`
  scalar Upload

  type EditProfileResult {
    ok: Boolean!
    error: String
  }
  type Mutation {
    editProfile(
      username: String
      email: String
      password: String
      bio: String
      avatar: Upload
    ): EditProfileResult!
  }
`
  1. scalar Upload 를 만들어서 Upload Type을 만듬
  2. avatar 이미지 파일의 type을 Upload로 설정함.

2. resolvers

import bcrypt from 'bcryptjs'
import prisma from '../../client'
import { protectedResolver } from '../users.util'
import fs from 'fs'

const resolveFn = async (
  _,
  { username, email, password: newPassword, bio, avatar },
  { loggedInUser }
 ///args로 username, email, password, bio, avater
  ///context에 loggedInUser 넣어서 editProfile하려는 user를 확인함.
) => {
  let avatarUrl = null
  ///avatarUrl 을 let으로 만들어 놓음.
  
  if (avatar) {
    const {
      file: { filename, createReadStream },
    } = await avatar
    //avatar로 부터 filename과 createReadStream을 뽑아냄.
    //avatar은 파일임. Altair로 일단 FileUpload 해 봄.
    
    const newFilename = `${loggedInUser.id}-${Date.now()}-${filename}`
    //filename 중복되지않게 filename 만들어줌,
    
    const readStream = createReadStream()
    const writeStream = fs.createWriteStream(
      process.cwd() + '/uploads/' + newFilename
    )
    ///process.cwd()는 project의 맨 윗쪽, server.js가 위치하는 곳
    ///uploads 폴더에 입력되게 함.
    
    readStream.pipe(writeStream)
    avatarUrl = `http://localhost:4000/static/${newFilename}`
    //upload위치에 압력된 파일 주소를 avatarUrl에 넣어줌.
    
  }

  let uglyPassword = null
  if (newPassword) {
    uglyPassword = await bcrypt.hash(newPassword, 10)
  }
  console.log(loggedInUser)
  
  //user의 profile을 update함.
  const updatesUser = await prisma.user.update({
    where: {
      id: loggedInUser.id,
    },
    data: {
      username,
      email,
      bio,
      ...(uglyPassword && { password: uglyPassword }),
      ...(avatarUrl && { avatar: avatarUrl }),
      
      //Es6문법임 확인할 것,
    },
  })
  if (updatesUser.id) {
    return {
      ok: true,
    }
  } else {
    return {
      ok: false,
      error: 'Could not update profile',
    }
  }
}

export default {
  Mutation: {
    editProfile: protectedResolver(resolveFn),
  },
}
  1. fs 는 fileSystem node에서 파일 관리하는 library임.

3. Altair (fileUpload test)

  1. avatar의 type을 Upload로 확인할 것.
  2. 맨 밑의 Add files에 avatar를 넣고 file select할 것
    3.args 는 VARIABLES에서 넣어주면 됨.
profile
코딩하는초딩쌤

0개의 댓글