How to get the thumbnail image from a GraphQL WP headless query

Question

How do you get the thumbnail not the feature image from the posts query using WPGraphQL Headless?

I can see that you can quite easily get the featured image and then it has srcSets for different imagery of a smaller size but there is no option that is clear that would give me the posts thumbnail image.

The reason I want to get a thumbnail instead of a featured image is because of performance.

Answer 1

Just had the very same question and hacked it with a one-liner that returns the thumbnail URL from the image's original sourceUrl:

 const thumbnailUrl = (srcUrl) => {
    if (!srcUrl) return;
    return srcUrl.split('.').slice(0,-1).join('.') + "-150x150." + srcUrl.split('.').pop();
  }

Since it adds a fixed string for the size variant it only works for fixed/cropped image sizes such as thumbnail.