Wie würden Sie das tun Datei-uploads in einem Reagieren-Relay-app?

Ersten, die Sie schreiben müssen die Relais-update auf Ihrem frontend-Komponente.
Wie diese:

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

Und Folgen Sie dann durch die Implementierung der mutation auf das frontend:

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',
       },
     }];
   }
 }

Und zuletzt implementieren Sie die handler auf der server/schema.

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,
      };
    });
  },
});

Alle obigen code können Sie finden Sie in meinem repo https://github.com/bfwg/relay-gallery
Es gibt auch eine live-demo https://fanjin.io

Ich bin lediglich das teilen der Ergebnisse von Marc-Andre Giroux von seinem blog, die Rails-spezifisch, so werde ich versuchen, es mehr generische und die Bereitstellung der Daten von der Antwort von @Nick.

Gibt es 2 Teile:

• Client-side Javascript code
• Server-Seite server-spezifischen code

Client-side Javascript Code

Den client-seitigen code weiter besteht aus 2 teilen:

1. Der mutation auf die upload-Datei, die sich Relais.Mutation (UploadFileMutation)

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

2. Die Komponente, enthält die Reagieren Komponente (FileUploader) zum Rendern die Benutzeroberfläche für das auswählen der Datei und ruft die mutation zu tun, der upload

   //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()
   }

Server-Seite Server-Spezifischen Code

Server-side-code besteht aus 2 teilen:

1. Das Teil zu handhaben Abruf der hochgeladenen Datei im MIME-multipart-format und übergibt es an die Mutation definiert, die in der GraphQL schema. Wir bieten NodeJS und Schienen Beispiele, die Ihnen helfen sollen abzuleiten Lösungen für andere Server.

Für NodeJS server Express (extrahiert aus express-graqphl Testfälle wie bereits von @Nick):

    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 }
      };
    }));

Ebenso für eine nicht-JS-server, z.B., 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. Die Mutation abrufen kann die Datei MIME multipart übergeben

Javascript GraphQL Schema:

    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
            }
          }
        }
      })
    });

Für Schienen GraphQL Schema:

    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

Während Sie kann auf jeden Fall umsetzen hochladen von Dateien auf Ihre GraphQL API-Endpunkt, es gilt als ein anti-pattern (Sie stoßen Probleme mit der max Datei Größe etc.).

Eine bessere alternative wäre die Beschaffung einer signierten URL, von Ihrem GraphQL API für das hochladen einer Datei direkt aus der client-side app für Amazon S3, Google Cloud Storage etc.

Wenn die server-side code benötigt, um die URL speichern in die Datenbank, sobald der upload abgeschlossen ist, kann es abonnieren zu dieser Veranstaltung direkt. Überprüfen Sie object change notification in der Google-Cloud als Beispiel.