在GraphQL中上传图像

我怎样才能在graphql中处理图片上传？

通过Muller使用快速path来处理从graphql上传和查询来查看图像和其他数据

app.use('/graphql', upload); app.use('/graphql', getData, graphqlHTTP(tokenData => ({ schema, pretty: true, tokenData, graphiql: true, }))); 

Answer 1

这是在React-Relay应用程序中如何上传文件的副本？

总之，是的，你可以在graphql中使用react + relay来上传文件。 您需要编写中继更新存储操作，例如：

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

以上所有的代码可以在这个回购中find他们https://github.com/bfwg/relay-gallery还有一个现场演示http://fanjin.computer