[개념정리] Scalar로 파일 업로드 처리하기

2021. 1. 12. 09:51프로그래밍-Web/GraphQL

<서버>

 

1) Upload 타입 생성 및 필요 타입 정의

 

GraphQL에서 지원하는 내장 스칼라 타입은 String, Int, Float, Boolean, ID 뿐이다.

파일을 업로드하기 위해서는 새로운 스칼라 타입을 생성해야 한다.

 

예제 코드와 같이

1. Upload라는 새로운 스칼라타입을 선언해주고, 파일 업로드의 인풋은 Upload 타입으로 받는다고 선언해준다.

2. 또한 받아온 File에 대한 타입 역시 선언이 필요하다.

3. 마지막으로 Upload Mutation에 대한 선언을 해주자.

 

이때 Upload로 선언한 타입은 리졸버 어딘가에서 라이브러리를 이용해 처리해줘야한다.

그렇지 않으면 타입검사를 사실상 안하는거나 다름 없다

 

2) Scalar 객체 처리 리졸버 정의

 

이 예시에서는 apollo-server 라이브러리를 이용해  Upload 타입을 처리했다

 

 

<클라이언트>

 

3) 파일 데이터 전송

 

클라이언트 Mutation에서는 File을 그대로 변수에 받는다

그 외 쿼리를 보내는 방법은 타 GraphQL API 사용과 동일하다

네트워크탭을 열어보면 기타 input 데이터들은 이전과 같은 방식으로 보내지는데

그 외에 Form data전송 로그도 하나 생긴 것을 볼 수 있다.

 

4) 클라이언트 전송 방식 설정

 

이때 주의할 부분은, 클라이언트 GraphQL 프레임워크에서 upload 링크를 처리해주어야 한다는점이다

내 경우에는 apollo client를 사용하기 때문에 이곳에서 제공하는 createUploadLink객체를 생성하여, gql api를 쏠때마다 해당 객체를 통과하도록 만들어주었다

 

<다시 서버>

 

5)  stream 객체 읽기

 

서버는 보통의 call과 동일하게 파일 데이터를 추가한 call을 받았을것이다

 

이때 리졸버에서 고려할 점은, createReadStream을 통해 파일 데이터에 접근해야 한다는 점이다.

기본적으로 음성,영상,사진 데이터들은 스트림을 통해 데이터열로 전송받는다.

stream이라는 추상적 개념을 통해 송수신처와 관계없이 파일 데이터를 다룰 수 있다

 

6) 필요한 로직의 리졸버 작성

 

하면된다 끝.