Active Storage Direct Upload를 GraphQL과 연동하는 과정은 크게 세 단계로 구성됩니다. 첫째, 폼 컴포넌트(React.js, Ant Design)와 직접 업로드 기능을 통합합니다. Rails는 /rails/active_storage/direct_uploads라는 직접 업로드용 내장 엔드포인트를 제공하며, @rails/activestorage 라이브러리의 DirectUpload 클래스를 사용하여 파일을 직접 업로드하는 헬퍼 함수(directUploadCreate)를 정의합니다. 이 함수는 파일 업로드 완료 후 signed_id 문자열을 반환하는데, 이 signed_id는 업로드된 파일의 임시 식별자 역할을 합니다. signed_id는 단순한 문자열이므로, GraphQL 뮤테이션에서 파일 타입 대신 문자열 필드로 처리하여 ApolloUploadServer와 같은 복잡한 파일 타입 처리를 피할 수 있습니다. Ant Design의 Upload 컴포넌트의 customRequest 속성을 활용하여 이 헬퍼 함수를 호출하고, 반환된 signed_id를 폼 필드(예: avatar)에 설정합니다.
둘째, GraphQL 뮤테이션을 업데이트합니다. 프론트엔드에서 signed_id를 문자열로 전달하므로, Rails 애플리케이션의 GraphQL 스키마(예: Types::UserAttributes)에서 해당 필드(예: avatar)를 String 타입으로 정의해야 합니다. 이어서 사용자 업데이트와 같은 기능을 처리하는 GraphQL 뮤테이션(예: Mutations::UserUpdate)을 생성하고, 입력된 signed_id를 사용하여 Active Storage가 실제 파일과 연동되도록 Rails 모델에서 처리합니다. 마지막으로, 이 뮤테이션을 GraphQL 스키마의 MutationType에 추가하여 클라이언트에서 접근할 수 있도록 합니다.
셋째, 클라이언트에서 뮤테이션을 호출합니다. React 애플리케이션에서는 graffle와 같은 GraphQL 클라이언트를 사용하여 폼 제출 시 정의된 GraphQL 뮤테이션(userUpdateDocument)을 호출합니다. 이때, 폼에서 설정된 signed_id를 뮤테이션의 attributes 객체에 포함하여 전송합니다. 이 과정을 통해 파일은 클라이언트에서 클라우드 저장소로 직접 업로드되고, 그 결과로 생성된 signed_id는 GraphQL을 통해 Rails 백엔드로 전달되어 해당 파일이 데이터베이스의 레코드와 올바르게 연결됩니다.