# GraphQL support
Imager X comes with some basic support for GraphQL; two directives and
a custom query. The imagerTransform directive mimicks the built-in
transform directive, you apply it to the url property of an Asset field,
supply the arguments for the transform, and Imager will return the URL for
the transformed image.
{
entries (section: "news", orderBy: "dateCreated DESC") {
title
... on news_news_Entry {
image {
url @imagerTransform (width: 300, height: 300, mode: "crop", format: "jpg")
}
}
}
}
The directive also takes a return argument, which can be used to get base64
encoded versions back, instead of the URL. It takes one of three possible values,
url, base64, dataUri and blurhash.
TIP
An important config setting when using GraphQL is safeFileFormats (opens new window).
Since it's harder/not possible to conditionally check if a given file format should be processed in GraphQL, Imager will only try to transform
images that are explicitely whitelisted in safeFileFormats. So make sure you enable any file formats that you allow users to upload.
{
entries (section: "news", orderBy: "dateCreated DESC") {
title
... on news_news_Entry {
image {
url,
transform: url @imagerTransform (width: 300, height: 300, mode: "crop", format: "jpg"),
dataUri: url @imagerTransform (width: 4, height: 4, mode: "crop", format: "gif", return: "dataUri"),
blurhash: url @imagerTransform (width: 100, height: 100, mode: "crop", format: "jpg", return: "blurhash"),
}
}
}
}
The imagerSrcset works in the same way, but takes the handle for a named
transform as its only argument, and returns a srcset string.
{
entries (section: "news", orderBy: "dateCreated DESC") {
title
... on news_news_Entry {
image {
url,
srcset: url @imagerSrcset (handle:"heroImage")
}
}
}
}
Directives are fine for simple things, but gives you a very limited amount of information back. In addition, services like Gatsby and Gridsome that consumes your GraphQL, doesn't automatically know about them. They need a source plugin that describes how the directives work.
To unlock the real power of GraphQL and Imager, you probably want to use
the imagerTransform query. The query takes either an id or an url as
argument, along with the handle of a named transform , and let's you
return any property on the transformed image.
{
hero: imagerTransform(id: 340, transform: "heroImage") {
url,
width,
height,
size,
extension,
mimeType
}
}
You can also use the imagerTransform query directly on an
AssetInterface like this:
{
entries (section: "news", orderBy: "dateCreated DESC") {
title
... on news_news_Entry {
image {
url,
... on volume_Asset {
transform: imagerTransform(transform: "heroImage") {
width
height
url
mimeType
size
}
}
}
}
}
}
There is still a lot of features in Imager that is not exposed through GraphQL. If you're in need of something, please file a feature request in the repo (opens new window)!