gatsby-source-wordpress / allWpMediaItem | audio/mpeg

Description

Hi, i’m able to query using allWpMediaItem which returns an .mp3 that i have uploaded to “media” in Wordpress. However the below query only returns the mp3 if it’s the last media item i uploaded.

Steps to reproduce

Upload an .mp3 to Wordpress and query using the following query

{
  allWpMediaItem(filter: {mimeType: {eq: "audio/mpeg"}}) {
    edges {
      node {
        mimeType
        mediaItemUrl
      }
    }
  }
}

Which (for me) returns the following:

{
  "data": {
    "allWpMediaItem": {
      "edges": [
        {
          "node": {
            "mimeType": "audio/mpeg",
            "mediaItemUrl": "https://pauliepro.blog/wp-content/uploads/2021/02/215416__unfa__short-ping_01.mp3"
          }
        }
      ]
    }
  },
  "extensions": {}
}

If i then upload an image to “media” and re-run the query the query returns nothing.

Also in both cases the query always returns nothing when run in production locally and when deployed to Gatsby Cloud

As a test i’ve run a similar query in WP Admin

{
  mediaItems(where: {mimeType: AUDIO_MPEG}) {
    edges {
      node {
        mediaItemUrl
        mimeType
      }
    }
  }
}

which correctly returns the .mp3 but the filter doesn’t work, i’ve mentioned this in issue 1309

Expected result

There’s a small repro repo here but i’m currently developing using the same Wordpress graphql url so results may vary depending on what i’m currently doing with it.

I’d expect the query to always return correctly when run in development and production locally and in production when deployed to Gatsby Cloud

Actual result

empty result returned by ... allWpMediaItem(filter: {mimeType: {eq: "audio/mpeg"}}) { ...

Environment

  System:
    OS: macOS Mojave 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.16.1 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 88.0.4324.182
    Firefox: 85.0.2
    Safari: 13.1.1
  npmPackages:
    gatsby: ^2.29.3 => 2.29.3 
    gatsby-plugin-image: ^0.7.0 => 0.7.0 
    gatsby-plugin-sharp: ^2.14.1 => 2.14.1 
    gatsby-plugin-theme-ui: ^0.3.5 => 0.3.5 
    gatsby-source-filesystem: ^2.11.0 => 2.11.0 
    gatsby-source-wordpress: ^4.0.1 => 4.0.1 
    gatsby-transformer-sharp: ^2.12.0 => 2.12.0 
  npmGlobalPackages:
    gatsby-cli: 2.15.1

[PaulieScanlon]

Hey @IvanFlavorio yeah i know what you mean.

It’s a tricky one because WordPress won’t allow Gatsby to query data that’s not in use. It kind of makes sense. You wouldn’t want the plugin to query everything that’s been uploaded to the media library. On a large site this could be thousands of images and lots might not actually be used.

I guess another way round it would be to upload the pdf’s to the media library and add a link to that file in a WordPress page somewhere. It’s still a manual work around but it means you don’t need a “dummy page” or to query any data.

[PaulieScanlon]

Hey @IvanFlavorio not sure this will help but one solution i used was to create a “dummy” page that did reference the media items but i hid it from the site map and didn’t expose a route to it in the Gatsby front end. Gatsby still creates the page which “tricks” the plugin into thinking the media items are used. – hope that helps.

I explained the issue in this blog post: https://www.gatsbyjs.com/blog/headless-wordpress-future-shapes scroll down to: “A bit of trouble in the laboratory”