ExpressでGraphQLファイルのアップロードを実装する方法

必要なパッケージのインストールまず、ExpressおよびGraphQLのファイルアップロード機能をサポートするために必要なパッケージをインストールします。以下のコマンドを使用して、必要なパッケージをインストールします。

npm install express graphql express-graphql graphql-upload

サーバーの設定次に、Expressサーバーをセットアップし、GraphQLのアップロード機能を有効にします。以下のようなコードを作成します。

GraphQLスキーマの定義アップロード機能をサポートするために、GraphQLスキーマにUploadスカラータイプを追加する必要があります。以下のようにスキーマを更新してください。

scalar Upload
type Mutation {
  uploadFile(file: Upload!): UploadResult
}
type UploadResult {
  success: Boolean!
}

フロントエンドからのリクエスト処理最後に、フロントエンドからのリクエストを処理するためのクライアント側のコードを実装します。具体的な実装方法は使用しているクライアントのライブラリによって異なりますが、以下の例はaxiosを使用した場合のものです。


const axios = require('axios');
const FormData = require('form-data');

async function uploadFile(file) {
  const formData = new FormData();
  formData.append('operations', JSON.stringify({
    query: `
      mutation ($file: Upload!) {
        uploadFile(file: $file) {
          success
        }
      }
    `,
    variables: {
      file: null,
    },
  }));
  formData.append('map', JSON.stringify({
    '0': ['variables.file'],
  }));
  formData.append('0', fs.createReadStream(file.path)); // アップロードするファイルのパスを指定してください

  const response = await axios.post('http://localhost:3000/graphql', formData, {
    headers: formData.getHeaders(),
  });

  console.log(response.data);
以上の手順に従うことで、ExpressでGraphQLファイルのアップロード機能を実装することができます。必要なパッケージをインストールし、Expressサーバーを設定し、GraphQLスキーマを更新し、フロントエンドからのリクエストを処理するためのクライアント側のコードを実装してください。

このような方法で、GraphQLを使用してExpressでファイルのアップロード機能を実装することができます。