GraphQL Image Server

Originals are stored on AWS S3. Images are edited and served via Imgix. Supported files are PNG, JPG and GIF.

Setup

import { uploadImage, GraphQLImage, GraphQLImageInput } from '@bayerischer-rundfunk/graphql-image-server';

const crops = {square: 1};

// query
new GraphQLObjectType({
  fields: {
    image: GraphQLImage(crops, 'yourdomain.imgix.net'),
  },
});

// mutation
new GraphQLInputObjectType({
  fields: {
    image: GraphQLImageInput(crops),
  },
});

GraphQLImage

A GraphQLType for querying images. These arguments are available, all are optional:

• width Resized width of the image
• height Resized height of the image
• aspectRatio Name of a crop (see setup). UNCROPPED is also possible.
• quality JPEG quality from 0 to 100. Default is 75.
• blur Gaussian blur from 0 to 2000.

Example:

{
  image(width: 400, crop: SQUARE)
}

GraphQLImageInput

A GraphQLInputType for uploading images. These fields are available:

• file Name of the multipart request field containing the image, URL of an image to be uploaded, or URL of the already uploaded image (in the latter case, it is not reuploaded again).
• crops List of crops
  • aspectRatio Name of the crop (see setup).
  • x Upper x-value
  • y Left y-value
  • width Width of the crop. Height is calculated according to the aspect-ratio given in the configuration.

uploadImages

In your resolve-function, you can replace all uploadImages(object, files, s3Config).

resolve(parent, args, context) {
  args.inputObject = await uploadImages(
    args.inputObject,
    context.request.files,
    {
    	region: string,
    	bucket: string,
    	accessKeyId: string,
    	secretAccessKey: string,
    	prefix: string,
    }
  );

  // save your inputObject
}

This function needs multer to parse the multipart requests and the request object to be stored on the context

graphQLServer.use(multer({ storage: multer.memoryStorage() }).any());
graphQLServer.use('/graphql', graphqlHTTP(request => ({
	schema,
	context: { request },
	graphiql: true,
})));

Usage

mutation {
  item({
    file: "Name of the multipart form field the file is transmitted in or an URL of an image.",
    crops: [{
      aspectRatio: SQUARE,
      x: 100,
      y: 80,
      width: 1024,
    }]
  }) {
    image(width: 400, aspectRatio: SQUARE)
  }
}