Wpgraphql queries under fetching queries from wordpress

Question

I have this issue were I'm trying to request images I've uploaded on my WordPress instance with graphql from Gatsby but I only get the most recent item I uploaded on wordpress.

When i query using the Graphiql IDE on WordPress I the desired results. See this image ➡️ Image of the query and response in get from Graphiql IDE on wordpress

Below is the query and response in get from Graphiql IDE on wordpress

// Graphiql IDE query
{
  mediaItems {
    edges {
      node {
        databaseId
      }
    }
  }
}


// The response

{
  "data": {
    "mediaItems": {
      "edges": [
        {
          "node": {
            "databaseId": 30
          }
        },
        {
          "node": {
            "databaseId": 28
          }
        },
        {
          "node": {
            "databaseId": 26
          }
        },
        {
          "node": {
            "databaseId": 20
          }
        }
      ]
    }
  },
  "extensions": {
    "debug": []
  }
}

but when I query from the http://localhost:8000/___graphql endpoint on my local development as I said earlier I only get the most recent upload.

Image of local development query and response

the code is below

// The query to http://localhost:8000/___graphql endpoint
{
  wpMediaItem {
    altText
    localFile {
      childImageSharp {
        gatsbyImageData(placeholder: TRACED_SVG, width: 100)
        id
      }
    }
  }
}

// The response
{
  "data": {
    "wpMediaItem": {
      "altText": "background lines",
      "localFile": {
        "childImageSharp": null
      }
    }
  },
  "extensions": {}
}

The ednpoints I can query the enpoints img 1 the enpoints img 2

Below is my gatsby-config.js file

const path = require("path");
// Get paths of Gatsby's required rules, which as of writing is located at:
// https://github.com/gatsbyjs/gatsby/tree/fbfe3f63dec23d279a27b54b4057dd611dce74bb/packages/
// gatsby/src/utils/eslint-rules
const gatsbyRequiredRules = path.join(
  process.cwd(),
  "node_modules",
  "gatsby",
  "dist",
  "utils",
  "eslint-rules"
);

module.exports = {
  siteMetadata: {
    title: `########`,
    description: `################`,
    author: `###################`,
    siteUrl: `###############`,
  },
  plugins: [
    `gatsby-plugin-image`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        // This will impact how browsers show your PWA/website
        // https://css-tricks.com/meta-theme-color-and-trickery/
        // theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        url: `http://34.133.115.37/graphql`,
      },
    },
    {
      resolve: `gatsby-plugin-google-fonts`,
      options: {
        fonts: [`Poppins`],
        display: `swap`,
      },
    },
    {
      resolve: `gatsby-plugin-styled-components`,
      options: {
        // Add any options here
      },
    },
    {
      resolve: "gatsby-plugin-eslint",
      options: {
        // Gatsby required rules directory
        rulePaths: [gatsbyRequiredRules],
        // Default settings that may be ommitted or customized
        stages: ["develop"],
        extensions: ["js", "jsx", "ts", "tsx"],
        exclude: ["node_modules", "bower_components", ".cache", "public"],
        // Any additional eslint-webpack-plugin options below
        // ...
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

I don't know but probably my query is request is wrong, I have tried every can some help

score 0 · Answer 1 · answered Sep 01 '22 at 16:50

0

wpMediaItem is not the same node as wpMediaItems (spot the trailing S). The first one is querying a single node, which by default would be sorted by upload date, while wpMediaItems fetch for all images, an array of images (edges in this case), that's why you can get edges in one query and an isolated node in the other, directly accessing for that node data (altText, etc.).

Take a deeper look at the GraphiQL playground (http://localhost:8000/___graphql) to get the correct node, but it should be there.

answered Sep 01 '22 at 16:50

Ferran Buireu

28,630
6
39
67

I knew it would be that, but in my schema there's no `wpMediaItems` what do you think the issuse is? – Schniffenhausen Sep 01 '22 at 21:28
Without knowing your project it's impossible to know but my bet is that the images are there, maybe under another node name but should be somewhere – Ferran Buireu Sep 02 '22 at 05:36

Wpgraphql queries under fetching queries from wordpress

1 Answers1