https://github.com/graphql-compose/graphql-compose-boilerplate-upload
https://github.com/graphql-compose/graphql-compose-boilerplate-upload
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/graphql-compose/graphql-compose-boilerplate-upload
- Owner: graphql-compose
- Created: 2018-07-05T09:03:44.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-07-05T09:05:31.000Z (over 7 years ago)
- Last Synced: 2025-06-11T13:34:25.175Z (6 months ago)
- Language: JavaScript
- Size: 51.8 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# graphql-compose-boilerplate-upload
Add support for files upload in your graphql schema. Obtain any number of files in any resolvers at any field depth.
Will be good if you get acquainted with [graphql-multipart-request-spec](https://github.com/jaydenseric/graphql-multipart-request-spec)
Take a look at [commits](https://github.com/graphql-compose/graphql-compose-boilerplate-upload/commits/master) step by step, it will be easy to follow.
## Demo
Make proper `multipart/form-data` POST request with `operations` and `map` keys. And don't forget to provide files:
**Request via CURL**
```bash
curl localhost:4000/graphql \
-F operations='{ "query": "mutation ($poster: Upload) { createPost(id: 5, poster: $poster) { id } }", "variables": { "poster": null } }' \
-F map='{ "0": ["variables.poster"] }' \
-F 0=@package.json
```
**Response from GraphQL server**
```bash
{"data":{"createPost":{"id":5}}}
```
**Request via POSTMAN**
**Resolver code**
```js
createPost: {
type: 'Post',
args: {
id: 'Int!',
title: 'String',
authorId: 'Int',
images: '[Upload]',
poster: 'Upload',
},
resolve: async (_, { id, title, authorId, images, poster }) => {
const newPost = { id, title, authorId };
// somehow work with files
if (poster) {
console.log('Argument `poster` is a Promise:')
console.log(poster);
console.log("\nIt's value is and object with FileStream:");
console.log(await poster);
}
// somehow save a new record
posts.push(newPost);
return newPost;
},
},
```
**Console log on the server side**
```bash
Argument `poster` is a Promise:
Promise {
{ stream:
FileStream {
_readableState: [Object],
readable: true,
domain: null,
_events: [Object],
_eventsCount: 2,
_maxListeners: undefined,
truncated: false,
_read: [Function] },
filename: 'package.json',
mimetype: 'application/octet-stream',
encoding: '7bit' } }
It's value is and object with FileStream:
{ stream:
FileStream {
_readableState:
ReadableState {
objectMode: false,
highWaterMark: 16384,
buffer: [Object],
length: 1983,
pipes: null,
pipesCount: 0,
flowing: null,
ended: true,
endEmitted: false,
reading: false,
sync: false,
needReadable: false,
emittedReadable: true,
readableListening: false,
resumeScheduled: false,
destroyed: false,
defaultEncoding: 'utf8',
awaitDrain: 0,
readingMore: false,
decoder: null,
encoding: null },
readable: true,
domain: null,
_events: { end: [Array], limit: [Object] },
_eventsCount: 2,
_maxListeners: undefined,
truncated: false,
_read: [Function] },
filename: 'package.json',
mimetype: 'application/octet-stream',
encoding: '7bit' }
```
## Includes for Files Upload
- [apollo-upload-server](https://github.com/jaydenseric/apollo-upload-server) for parsing `multipart/form-data` POST requests via [busboy](https://github.com/mscdex/busboy)
## Includes from basic graphql-compose-boilerplate
- Babel (ES6, babel-preset-env)
- ESLint
- Flowtype
- express
- express-graphql
- graphql
- graphql-compose
- nodemon
## Usage
```bash
git clone https://github.com/graphql-compose/graphql-compose-boilerplate-upload
cd graphql-compose-boilerplate
# make it to your own
rm -rf .git
yarn install
# start server with reloading on file changes
yarn dev
# OR start server
yarn start
```