GraphQL에서 파일 업로드

기존의 아폴로 서버에서 파일 업로드를 하기 위해선 express를 설치해주어야한다.

 

기존의 아폴로 서버

import { ApolloServer, gql } from "apollo-server";
import schema from "./schema"; //typeDefs와 resolvers의 통합

const server = new ApolloServer({
  schema,
});

server.listen().then(({ url }) => {
  console.log(`🚀  Server ready at ${url}`);
});

 

기존의 아폴로 서버에서 npm을 이용하여 express와 graphql-upload를 설치

npm install apollo-server-express express graphql-upload --save

apollo-server-express의 버전은 3.6.7로 진행하였다.

 

express 서버 가동 및 graphql-upload 미들웨어 설정

import { ApolloServer } from "apollo-server-express"; //아폴로서버에서 아폴로서버익스프레스로 교체
import * as express from "express";
import { graphqlUploadExpress } from "graphql-upload";
import schema from "./schema";

async function startServer() {
  const server = new ApolloServer({
    schema,
  });
  await server.start(); // 기존의 아폴로서버 가동

  const app = express(); 

  app.use(graphqlUploadExpress()); // express 미들웨어로 graphql-upload실행

  server.applyMiddleware({ app }); // 아폴로서버의 미들웨어로 express서버 실행

  await new Promise<void>((r) => app.listen({ port: 4000 }, r)); // express서버 가동 

  console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`);
}

startServer();

위와 같이 아폴로서버내에서 익스프레스 서버를 구성해주어야한다.

(깃헙: https://github.com/Mason3144/wetube-graphgl/commit/2ef781814bfd26af39af4a86be1cb8cc3afcfcb6#diff-8a8ae07582c9d433ec8c2e5c4310ff8901e604f4965c5b90a49117ad46c47595)

 

scalar 추가

업로드기능을 수행할 typeDefs에 scalar를 추가해주어야 한다.

 

ex)  editProfile.typeDefs.ts

import { gql } from "apollo-server";

export default gql`
  scalar Upload
  type Mutation {
    editProfile(
      email: String
      password: String
      avatar: Upload
      firstName: String
      lastName: String
    ): MutationResult
  }
`;

사실 아무 typeDefs 파일에 scalar Upload를 한번만 추가해줘도 모든 Mutation에서 업로드가 가능했다. 이럴거면 서버에서 옵션으로 넣는게 낫지 않을까...

(깃헙:https://github.com/Mason3144/wetube-graphgl/commit/2ef781814bfd26af39af4a86be1cb8cc3afcfcb6#diff-e1212c10d3d979ba93fae4bc94e5c470933bc6dd7d0540c3c239efa59ec69f69)

 

 

마무리 

현재 공식문서를 보니 사용방식이 조금 바뀐것같다. (처음 apollo-server-express를 설치했을때 버전차이로인해 엄청고생했엇다...) 

아폴로의 경우 업데이트를 자주하니 항상 버전을 체크하고 공식문서를 참조하자.

(아폴로 공식문서:  https://www.apollographql.com/docs/apollo-server/api/express-middleware)