[typescript] 타입스크립트와 GraphQL을 함께 사용하는 파일 다운로드 방법

15 Dec 2023

typescript

이번 포스트에서는 타입스크립트와 GraphQL을 사용하여 파일을 다운로드하는 방법에 대해 알아보겠습니다.

필요한 패키지 설치

이 기능을 구현하기 위해 먼저 필요한 패키지들을 설치해야 합니다.

npm install axios graphql

여기서 axios는 HTTP 요청을 보낼 때 사용하며, graphql은 GraphQL 요청을 보내기 위한 라이브러리입니다.

파일 다운로드 함수 작성

이제 파일을 다운로드하는 함수를 작성해보겠습니다.

import axios from 'axios';
import { print } from 'graphql';
import { createWriteStream } from 'fs';
import { request } from 'http';
import { RequestOptions } from 'https';

const downloadFile = async (url: string, query: any, variables: any, filePath: string) => {
  const queryStr = print(query);
  const options: RequestOptions = {
    method: 'post',
    headers: {
      'Content-Type': 'application/json',
    },
    data: {
      query: queryStr,
      variables,
    },
    url,
    responseType: 'stream',
  };

  const response = await axios(options);
  response.data.pipe(createWriteStream(filePath));
};

위 코드에서 downloadFile 함수는 파일의 URL, GraphQL 쿼리, 변수, 그리고 저장될 파일 경로를 인자로 받아서 파일을 다운로드합니다.

사용 예제

이제 작성한 함수를 사용하는 예제를 살펴보겠습니다.

import { gql } from 'graphql-tag';

const fileDownloadQuery = gql`
  query($fileId: ID!) {
    getFile(fileId: $fileId) {
      url
      metadata {
        filename
      }
    }
  }
`;

const fileId = '12345'; // 다운로드할 파일의 ID
const filePath = '/path/to/save/file.jpg'; // 저장될 파일의 경로

const download = async () => {
  await downloadFile('http://your-graphql-api.com', fileDownloadQuery, { fileId }, filePath);
};

download();

위 예제에서는 GraphQL 쿼리를 사용하여 파일의 URL을 가져온 후, 이를 downloadFile 함수에 전달하여 파일을 다운로드하는 과정을 보여줍니다.

이제 여러분도 타입스크립트와 GraphQL을 함께 사용하여 파일을 다운로드하는 방법에 대해 알게 되었습니다.

참고: axios 공식 문서, graphql 공식 문서

Happy coding!