WP Manifestindependent plugin directory
manifest / integrations / wp-graphql-performance-lab

WPGraphQL Performance Lab

WPGraphQL Performance Lab

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

★ 2stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

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

Readme

WPGraphQL 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

  1. Install the Performance Plugin and WPGraphQL
  2. Upload the zip of this plugin to your WordPress plugins
  3. 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"
    }
  }
}

Read the full README on GitHub →