manifest / integrations / wp-graphql-performance-lab

WPGraphQL Performance Lab

by Move Your Digital · github.com/moveyourdigital/wp-graphql-performance-lab · website

★ 2stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/moveyourdigital/wp-graphql-performance-lab/archive/refs/heads/master.zip

No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.

Readme github.com/moveyourdigital/wp-graphql-performance-lab ↗

This plugin extends the WPGraphQL plugin to provide support for the Performance Plugin, tipically the possibility to retrieve WebP versions of srcSet in MediaItem and the dominant color.

Requirements

PHP >= 7.2
WordPress >= 5.8

Installation

Install the Performance Plugin and WPGraphQL
Upload the zip of this plugin to your WordPress plugins
Activate all plugins

Usage

After installation, you can try the following query:

query GetMediaItem($id: ID!) {
  mediaItem(id: $id) {
    sourceUrl
    srcSet(variant: WEBP)
    dominantColor(format: HEX)
  }
}

The result being, for instance:

{
  "data": {
    "mediaItem": {
      "sourceUrl": "https://example.com/uploads/2022/06/podcats.jpg",
      "dominantColor": "#44b4cb",
      "srcSet": "https://example.com/uploads/2022/06/podcats-450x160.webp 450w, https://example.com/uploads/2022/06/podcats-1024x364.webp 1024w, https://example.com/uploads/2022/06/podcats-768x273.webp 768w, https://example.com/uploads/2022/06/podcats.webp 1440w"
    }
  }
}

Advanced use-cases

A couple of receipes for advances use-cases.

Return both jpeg and webp `srcSet`

Duplicate srcSet by using a different alias key:

query GetMediaItem($id: ID!) {
  mediaItem(id: $id) {
    sourceUrl
    srcSet(variant: ORIGINAL)
    webPSrcSet: srcSet(variant: WEBP)
  }
}

Resulting in something like this:

{
  "data": {
    "mediaItem": {
      "sourceUrl": "https://example.com/uploads/2022/06/podcats.jpg",
      "srcSet": "https://example.com/uploads/2022/06/podcats-450x160.jpg 450w, https://example.com/uploads/2022/06/podcats-1024x364.jpg 1024w, https://example.com/uploads/2022/06/podcats-768x273.jpg 768w, https://example.com/uploads/2022/06/podcats.jpg 1440w",
      "webPSrcSet": "https://example.com/uploads/2022/06/podcats-450x160.webp 450w, https://example.com/uploads/2022/06/podcats-1024x364.webp 1024w, https://example.com/uploads/2022/06/podcats-768x273.webp 768w, https://example.com/uploads/2022/06/podcats.webp 1440w"
    }
  }
}