acf plugin uploads svg with decimal width and height

@psulkava Hey! I’m sorry you’re running into issues using SVGs and querying their data via WPGraphQL.

WordPress doesn’t natively support SVG uploads. I assume another plugin is also active to allow SVG uploads?

Anyway, because SVGs are not supported as uploads in core the expectation is that mediaDetails.height and mediaDetails.width will be integers and not floats.

Since your WordPress install has been modified to support SVG uploads, you will want to modify your WPGraphQL Schema to support this change.

I have 2 suggestions that might work:

1. Filter the MediaDetails.height and MediaDetails.width fields to return a Float instead of Int
2. Register new fields to the schema such as MediaDetails.heightAsFloat and MediaDetails.widthAsFloat

1. Filter the Field Types

This snippet shows how to filter the height and width fields to be represented in the GraphQL Schema as “Float” (untested, but I believe it should work)

<?php
add_filter( 'graphql_MediaDetails_fields', function( $fields ) {

    // First, make sure there's actually a "height" field registered to the MediaDetails Type
    if ( isset( $fields['height'] ) ) {

      // Override the resolve function completely
      $fields['height']['type'] = 'Float';
    }

    // First, make sure there's actually a "width" field registered to the MediaDetails Type
    if ( isset( $fields['width'] ) ) {

      // Override the resolve function completely
      $fields['width']['type'] = 'Float';
    }

    return $fields;

}, 10, 1 );

2. Register new Fields

This snippet shows how to register new fields to the MediaItem type:

<?php
add_action( 'graphql_register_types', function() {

  register_graphql_fields( 'MediaDetails', [
    'heightAsFloat' => [
       'type' => 'Float',
       'description' => __( 'Height of the MediaItem returned as a Float', 'your-textdomain' ),
       'resolve' => function( $media_details, $args, $context, $info ) {
          return ! empty( $media_details['height'] ) ? $media_details['height'] : null;
        } 
    ],
    'widthAsFloat' => [
       'type' => 'Float',
       'description' => __( 'Width of the MediaItem returned as a Float', 'your-textdomain' ),
       'resolve' => function( $media_details, $args, $context, $info ) {
          return ! empty( $media_details['height'] ) ? $media_details['height'] : null;
        } 
    ]
  ] );

} );