Error "MediaItem" in inline html: Expected a value of type "Int" but received: 3.99

[etnichols]

Hi there,

First off thanks for your work on this awesome plugin! I got the starter site working and love to see the auto-rebuilds after WP content changes.

I'm attempting to use gatsby-source-wordpress-experimental on a site that has 300+ MediaItems of types .jpg, .png, .pdf, .docx, .wmv .pptx, .mp4, .bmp.

Details:

Using "gatsby-source-wordpress-experimental": "^0.8.6"

plugin entry in gatsby-config.js (it is largely copy/pasta from the starter site):

    {
      resolve: `gatsby-source-wordpress-experimental`,
      options: {
        html: {
          useGatsbyImage: true,
        },
        url: process.env.GATSBY_GRAPHQL_API_URL,
        protocol: `https`,
        hostingWPCOM: false,
        // Flip on for debugging
        verboseOutput: true,
        normalizer: ({ entities }) =>
          entities.map(entity => transformSlug(entity)),
        verbose: true,
        schema: {
          queryDepth: 5,
          typePrefix: `Wp`,
          timeout: 30000,
          perPage: 10,
        },
        develop: {
          nodeUpdateInterval: 10000,
          hardCacheMediaFiles: false,
        },
        production: {
          hardCacheMediaFiles: false,
        },
        debug: {
          // these settings are all the defaults,
          // remove them if you'd like
          graphql: {
            showQueryOnError: false,
            showQueryVarsOnError: true,
            copyQueryOnError: true,
            panicOnError: true,
            // a critical error is a WPGraphQL query that returns an error and no response data. Currently WPGQL will error if we try to access private posts so if this is false it returns a lot of irrelevant errors.
            onlyReportCriticalErrors: false,
          },
        },
        // fields can be excluded globally.
        // this example is for wp-graphql-gutenberg.
        // since we can get block data on the `block` field
        // we don't need these fields
        excludeFieldNames: [`blocksJSON`, `saveContent`],
        type: {
          Post: {
            limit:
              process.env.NODE_ENV === `development`
                ? // Lets just pull 50 posts in development to make it easy on ourselves.
                  10
                : // and we don't actually need more than 5000 in production for this particular site
                  5000,
          },
          // this shows how to exclude entire types from the schema
          // these examples are for wp-graphql-gutenberg
          CoreParagraphBlockAttributes: {
            exclude: true,
          },
          CoreParagraphBlockAttributesV2: {
            exclude: true,
          },
          CorePullquoteBlockAttributes: {
            exclude: true,
          },
          MenuItem: {
            exclude: true,
          },
        },
      },
    },

Attempting to run gatsby develop yields following output:

evannichols:_dev/lead-to-read ‹wp-experimental*›$ gad
success open and validate gatsby-configs - 0.105s
success load plugins - 1.432s
success onPreInit - 0.012s
success initialize cache - 0.047s
success copy gatsby files - 0.102s
success onPreBootstrap - 0.021s
⠀
info  gatsby-source-wordpress

	This is either your first build or the cache was cleared.
	Please wait while your WordPress data is synced to your Gatsby cache.

	Maybe now's a good time to get up and stretch? :D

success  gatsby-source-wordpress  ingest WPGraphQL schema - 1.850s
success createSchemaCustomization - 3.438s
success  gatsby-source-wordpress  ContentType - 2.256s - fetched 3
success  gatsby-source-wordpress  Category - 4.185s - fetched 13
success  gatsby-source-wordpress  Comment - 4.516s - fetched 21
success  gatsby-source-wordpress  Menu - 1.837s - fetched 1
success  gatsby-source-wordpress  Page - 8.180s - fetched 31
success  gatsby-source-wordpress  Taxonomy - 2.235s - fetched 3
success  gatsby-source-wordpress  Post - 3.072s - fetched 10
success  gatsby-source-wordpress  Tag - 9.204s - fetched 54
success  gatsby-source-wordpress  User - 1.214s - fetched 4

 ERROR

 gatsby-source-wordpress  Error category: undefined

Error:
  Internal server error

 Debug message:
  Expected a value of type "Int" but received: 3.99


 ERROR

 gatsby-source-wordpress  Error category: undefined

Error:
  Internal server error

 Debug message:
  Expected a value of type "Int" but received: 3.99

... about 10 more error messages of same format as above.

Another message reads: Expected a value of type "Int" but received: 4.25. And also 4.13, 4.3, 3.51.

I can share the link to graphql URL privately if needed (and link to repo). I was unable to reproduce using a local WP instance with same file types uploaded. This issue is present regardless of the value of useGatsbyImage in the plugin config.

Further details:

MacBook Pro (Retina, 13-inch, Early 2015)
Node v12.10.0
gatsby-cli -v 2.12.58

Full dump of package.json deps:

  "dependencies": {
    "@apollo/react-hooks": "^3.1.5",
    "apollo-cache-inmemory": "^1.6.5",
    "apollo-client": "^2.6.8",
    "apollo-link-http": "^1.5.17",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-runtime": "^6.26.0",
    "gatsby": "^2.20.4",
    "gatsby-background-image": "^0.9.12",
    "gatsby-image": "^2.2.34",
    "gatsby-plugin-google-analytics": "^2.3.1",
    "gatsby-plugin-mailchimp": "^5.1.2",
    "gatsby-plugin-manifest": "^2.2.31",
    "gatsby-plugin-offline": "^3.0.27",
    "gatsby-plugin-react-helmet": "^3.1.16",
    "gatsby-plugin-sass": "^2.1.26",
    "gatsby-plugin-sharp": "^2.3.5",
    "gatsby-plugin-typescript": "^2.1.23",
    "gatsby-plugin-typography": "^2.3.20",
    "gatsby-source-filesystem": "^2.1.40",
    "gatsby-source-graphql": "^2.5.0",
    "gatsby-source-wordpress": "^3.1.54",
    "gatsby-source-wordpress-experimental": "^0.8.6",
    "gatsby-transformer-sharp": "^2.3.7",
    "graphql-tag": "^2.10.3",
    "hamburgers": "^1.1.3",
    "he": "^1.2.0",
    "isomorphic-fetch": "^2.2.1",
    "lodash": "^4.17.15",
    "node-sass": "^4.13.0",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-apollo": "^3.1.5",
    "react-dom": "^16.12.0",
    "react-helmet": "^5.2.1",
    "react-hook-form": "^4.3.0",
    "react-responsive-carousel": "^3.1.51",
    "react-typography": "^0.16.19",
    "typography": "^0.16.19",
    "typography-breakpoint-constants": "^0.16.19"
  },

Please let me know if I can provide any further information to aid debugging. Thank you!

[TylerBarnes]

Hi @etnichols , thanks for opening this issue. If you can send me the live api endpoint & repo that would be super helpful! My email is tyler@gatsbyjs.com

Thanks

[TylerBarnes]

Hi @etnichols it looks like this is a bug in WPGraphQL. The type of the focalLength field should be a float but it's an int.

See wp-graphql/wp-graphql#1371 for more info. I've opened a PR to fix this in WPGQL but you can resolve it yourself temporarily by omitting that field.

Add this to your config:

MediaItemMeta: {
  excludeFieldNames: [`focalLength`],
},      

Thanks again for opening this issue! I'm closing it as it's an upstream issue with a temporary workaround.

Thanks!

[TylerBarnes]

As a sidenote this inspired me to improve the error messages a bit. The errors didn't have the path to the GraphQL field causing the error, so I've added that in v1.0.1. Now errors include something like: Error path: mediaItems.nodes[77].mediaDetails.meta.focalLength

[etnichols]

Verified the workaround -- thanks Tyler!

Glad it inspired improved error messages 💯