web-dev-qa-db-ja.com

React-Relayアプリでファイルのアップロードをどのように行いますか？

ファイルのアップロードは突然変異のようです。多くの場合、他のデータが付随しています。しかし、それは大きなバイナリブロブなので、GraphQLがそれをどのように処理できるかわかりません。ファイルのアップロードをRelayで構築されたアプリにどのように統合しますか？

javascriptreactjsgraphqlrelayjs
16
Nick Retallack

まず、フロントエンドコンポーネントにリレーアップデートを書き込む必要があります。このような：

onDrop: function(files) {
  files.forEach((file)=> {
    Relay.Store.commitUpdate(
      new AddImageMutation({
        file,
        images: this.props.User,
      }),
      {onSuccess, onFailure}
    );
  });
},

次に、フロントエンドにミューテーションを実装します。

class AddImageMutation extends Relay.Mutation {
   static fragments = {
     images: () => Relay.QL`
       fragment on User {
         id,
       }`,
     };

   getMutation() {
     return Relay.QL`mutation{ introduceImage }`;
   }

   getFiles() {
     return {
       file: this.props.file,
     };
   }

   getVariables() {
     return {
       imageName: this.props.file.name,
     };
   }

   getFatQuery() {
     return Relay.QL`
       fragment on IntroduceImagePayload {
         User {
           images(first: 30) {
             edges {
               node {
                 id,
               }
             }
           }
         },
         newImageEdge,
       }
     `;
   }

   getConfigs() {
     return [{
       type: 'RANGE_ADD',
       parentName: 'User',
       parentID: this.props.images.id,
       connectionName: 'images',
       edgeName: 'newImageEdge',
       rangeBehaviors: {
         '': 'prepend',
       },
     }];
   }
 }

そして最後に、サーバー/スキーマにハンドラーを実装します。

const imageMutation = Relay.mutationWithClientMutationId({
  name: 'IntroduceImage',
  inputFields: {
    imageName: {
      type: new GraphQL.GraphQLNonNull(GraphQL.GraphQLString),
    },
  },
  outputFields: {
    newImageEdge: {
      type: ImageEdge,
      resolve: (payload, args, options) => {
        const file = options.rootValue.request.file;
        //write the image to you disk
        return uploadFile(file.buffer, filePath, filename)
        .then(() => {
          /* Find the offset for new Edge*/
          return Promise.all(
            [(new myImages()).getAll(),
              (new myImages()).getById(payload.insertId)])
          .spread((allImages, newImage) => {
            const newImageStr = JSON.stringify(newImage);
            /* If Edge is in list return index */
            const offset = allImages.reduce((pre, ele, idx) => {
              if (JSON.stringify(ele) === newImageStr) {
                return idx;
              }
              return pre;
            }, -1);

            return {
              cursor: offset !== -1 ? Relay.offsetToCursor(offset) : null,
              node: newImage,
            };
          });
        });
      },
    },
    User: {
      type: UserType,
      resolve: () => (new myImages()).getAll(),
    },
  },
  mutateAndGetPayload: (input) => {
    //break the names to array.
    let imageName = input.imageName.substring(0, input.imageName.lastIndexOf('.'));
    const mimeType = input.imageName.substring(input.imageName.lastIndexOf('.'));
    //wirte the image to database
    return (new myImages())
    .add(imageName)
    .then(id => {
    //prepare to wirte disk
      return {
        insertId: id,
        imgNmae: imageName,
      };
    });
  },
});

上記のすべてのコードは私のリポジトリで見つけることができます https://github.com/bfwg/relay-gallery ライブデモもあります https://fanjin.io ==

10
Fan Jin

私は ドキュメントの説明 を見つけました。 Relay.Mutationをサブクラス化し、getFiles関数を実装できます。

また、express-graphqlは、サーバー側でこれを処理する方法のテストケースで 例 を提供します。

5
Nick Retallack

私は、Rails固有の blog からのMarc-Andre Girouxの調査結果を共有しているだけなので、より一般的にして、@ Nickによって提供された回答の詳細を提供しようと思います。

2つの部分があります：

  • クライアント側のJavascriptコード
  • サーバー側のサーバー固有のコード

クライアント側のJavascriptコード

クライアント側のコードはさらに2つの部分で構成されています。

  1. Relay.Mutation（UploadFileMutation）を拡張するアップロードファイルへの変更

    // The actual mutation
class UploadFileMutation extends Relay.Mutation {
  getFiles() {
    return {
      file: this.props.file,
    };
  }

  // ... Rest of your mutation
}

  2. ファイルを選択するためのUIをレンダリングするためのReactコンポーネント（FileUploader）を含み、アップロードを行うためにミューテーションを呼び出すコンポーネント

    // A react component to upload a file
class FileUploader extends React.Component {
  onSubmit() {
    const name = this.refs.name.value;
    const file = this.refs.fileInput.files.item(0);
    Relay.Store.update(
      new UploadFileMutation({
        name: name,
        file: file,
      })
    );
  }

  // ... Rest of React component, e.g., render()
}

サーバー側サーバー固有のコード

サーバー側のコードも2つの部分で構成されています。

  1. アップロードされたファイルをMIMEマルチパート形式で取得し、GraphQLスキーマで定義されたMutationに渡すためのパーツ。 NodeJSとRailsの例を提供します。これは、他のサーバーのソリューションを導き出すのに役立ちます。

NodeJS Expressサーバーの場合（@Nickが指摘した express-graqphl テストケースから抽出）：

    import multer from 'multer';

    var app = express();
    var graphqlHTTP = require('express-graphql');

    // Multer provides multipart form data parsing.
    var storage = multer.memoryStorage();

    app.use(urlString(), multer({ storage }).single('file'));

    // Providing the request, which contains the file MIME
    // multipart as `rootValue` to enable it to
    // be accessible from within Schema resolve functions.
    app.use(urlString(), graphqlHTTP(req => {
      return {
        schema: YourMutationSchema,
        rootValue: { request: req }
      };
    }));

同様に、非JSサーバーの場合、たとえば、RubyOnRails：

    def create
      query_string = params[:query]
      query_variables = ensure_hash(params[:variables]) || {}

      query = GraphQL::Query.new(
        YourSchema,
        query_string,
        variables: query_variables,
        # Shove the file MIME multipart into context to make it
        # accessible by GraphQL Schema Mutation resolve methods
        context: { file: request.params[:file] }
     )
  1. ミューテーションは、渡されたMIMEマルチパートファイルを取得できます

Javascript GraphQLスキーマの場合：

    var YourMutationSchema = new GraphQLSchema({
      query: new GraphQLObjectType({
        // ... QueryType Schema
      }),
      mutation: new GraphQLObjectType({
        name: 'MutationRoot',
        fields: {
          uploadFile: {
            type: UploadedFileType,
            resolve(rootValue) {
              // Access file MIME multipart using
              const _file = rootValue.request.file;

              // ... Do something with file
            }
          }
        }
      })
    });

Rails GraphQLスキーマの場合：

    AddFileMutation = GraphQL::Relay::Mutation.define do
      name "AddFile"
      input_field :name, !types.String

      # ... Add your standard mutation schema stuff here

      resolve -> (args, ctx) {
        # Retrieve the file MIME multipart
        file = ctx[:file]
        raise StandardError.new("Expected a file") unless file

        # ... Do something with file
      }
    end
4
nethsix

他の回答に加えて、Relay Modernでは、クライアントからファイルを送信する方法に小さな変更がありました。ミューテーションにgetFilesを含めてファイルをコンストラクターに渡す代わりに、次のようなものを使用できます。

UploadFileMutation.js

// @flow

import { commitMutation, graphql } from 'react-relay';

import type { Environment } from 'react-relay';
import type { UploadFileInput, UploadFileMutationResponse } from './__generated__/uploadFileMutation.graphql';

const mutation = graphql`
  mutation UploadFileMutation( $input: UploadFileInput! ) {
    UploadFile(input: $input) {
      error
      file {
        url
      }
    }
  }
`;

const getOptimisticResponse = (file: File | Blob) => ({
  UploadFile: {
    error: null,
    file: {
      url: file.uri,
    },
  },
});

function commit(
  environment: Environment,
  { fileName }: UploadFileInput,
  onCompleted: (data: UploadFileMutationResponse) => void,
  onError: () => void,
  uploadables,
) {
  return commitMutation(environment, {
    mutation,
    variables: {
      input: { fileName },
    },
    optimisticResponse: getOptimisticResponse(uploadables.fileToUpload),
    onCompleted,
    onError,
    uploadables,
  });
}

export default { commit };

コンポーネントでの使用法：

const uploadables = {
  fileToUpload: file, // file is the value of an input field for example
};

UploadFileMutation.commit(
  this.props.relay.environment,
  { fileName },
  onCompleted,
  onError,
  uploadables
);

uploadables configオプションは、ドキュメントに記載されていないため、ちょっと隠されていますが、ここで見つけることができます： https://github.com/facebook/relay/blob/ c4430643002ec409d815366b0721ba88ed3a855a/packages/repository-runtime/mutations/commitRelayModernMutation.js＃L32

1
JCM

GraphQL APIエンドポイントへのファイルのアップロードを確実に実装できますが、これはアンチパターンと見なされます（最大ファイルサイズなどの問題が発生します）。

より良い代替手段は、クライアント側アプリからAmazon S3、Google CloudStorageなどにファイルを直接アップロードするためにGraphQLAPIから署名付きURLを取得することです。

アップロードが完了した後でサーバー側のコードがURLをデータベースに保存する必要がある場合は、このイベントを直接サブスクライブできます。例として、Google Cloudで オブジェクト変更通知 を確認してください。

0
Konstantin Tarkus