Cannot download media files in Drupal CMS

[boulaffasae]

Description

Cannot query field localFile on type media__image.

{
  image: field_media_image {
    localFile {
      childImageSharp {
        fluid(maxWidth: 475, maxHeight: 475) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
}

Steps to reproduce

1. In your Drupal Instance, install the Media module.
2. Create and configure a new field field_media_image in Article, choose Media: Image.
3. Create a new Article.
4. Using Gatsby GraphQL Interface (GraphiQL), check if you can query localFile in field_media_image.

Expected result

Querying field localFile on type media__image, and downloading files.

Actual result

Cannot query field localFile on type media__image, and therefore no option to download files.

Environment

  System:
    OS: Linux 5.3 Ubuntu 18.04.4 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i5-4300U CPU @ 1.90GHz
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 14.0.0 - ~/.nvm/versions/node/v14.0.0/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v14.0.0/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v14.0.0/bin/npm
  Browsers:
    Chrome: 83.0.4103.61
    Firefox: 76.0.1
  npmPackages:
    gatsby: ^2.21.20 => 2.21.20
    gatsby-image: ^2.4.4 => 2.4.4
    gatsby-plugin-google-analytics: ^2.3.1 => 2.3.1
    gatsby-plugin-manifest: ^2.4.2 => 2.4.2
    gatsby-plugin-netlify: ^2.3.2 => 2.3.2
    gatsby-plugin-offline: ^3.2.1 => 3.2.1
    gatsby-plugin-react-helmet: ^3.3.1 => 3.3.1
    gatsby-plugin-sass: ^2.3.1 => 2.3.1
    gatsby-plugin-sharp: ^2.6.6 => 2.6.6
    gatsby-plugin-typography: ^2.5.2 => 2.5.2
    gatsby-source-drupal: ^3.5.1 => 3.5.1
    gatsby-source-filesystem: ^2.3.7 => 2.3.7
    gatsby-transformer-remark: ^2.8.7 => 2.8.7
    gatsby-transformer-sharp: ^2.5.2 => 2.5.2

[TylerBarnes]

Hi @boulaffasae !

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[boulaffasae]

Hi @TylerBarnes,

I created a test repo Going Headless with Gatsby & Drupal.

After install, head over to drupal directory and:

• Install Media Module:

ddev drush en media -y

• Add a new Media field to Content type Article at /admin/structure/types/manage/article/fields/add-field

• Update or create an article and upload an image to your new Media field

Now head over to http://localhost:8000/___graphql after running gatsby develop in gatsby directory, and execute the following query:

{
  allNodeArticle {
    edges {
      node {
        title
        created(formatString: "DD MMMM YYYY")
        relationships {
          field_media_image {
            localFile {
              childImageSharp {
                fluid(maxWidth: 760, maxHeight: 570) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    }
  }
}

Query will raise error:

{
  "errors": [
    {
      "message": "Cannot query field \"localFile\" on type \"media__image\".",
      "locations": [
        {
          "line": 9,
          "column": 13
        }
      ],
      "stack": [
        "GraphQLError: Cannot query field \"localFile\" on type \"media__image\".",
        "    at Object.Field (/home/user/Documents/gatsby-drupal/gatsby/node_modules/graphql/validation/rules/FieldsOnCorrectType.js:53:31)",
        "    at Object.enter (/home/user/Documents/gatsby-drupal/gatsby/node_modules/graphql/language/visitor.js:324:29)",
        "    at Object.enter (/home/user/Documents/gatsby-drupal/gatsby/node_modules/graphql/language/visitor.js:375:25)",
        "    at visit (/home/user/Documents/gatsby-drupal/gatsby/node_modules/graphql/language/visitor.js:242:26)",
        "    at validate (/home/user/Documents/gatsby-drupal/gatsby/node_modules/graphql/validation/validate.js:73:24)",
        "    at /home/user/Documents/gatsby-drupal/gatsby/node_modules/express-graphql/index.js:121:32",
        "    at processTicksAndRejections (internal/process/task_queues.js:97:5)"
      ]
    }
  ]
}

[boulaffasae]

Hi @TylerBarnes, @smthomas

I found that using Media Module, a user need to query the relationships inside the media field, and that the media field itself does not have a uri or url.

And that my prb is related to File Entity module, and not Media module. The File Entity module extends the core file entity and somehow he change file--file to file--image. But gatsby-source-drupal download only fields with type file--file.

File entity provides interfaces for managing files. It also extends the core file entity, allowing files to be fieldable, grouped into types, viewed (using display modes) and formatted using field formatters. File entity integrates with a number of modules, exposing files to Views, Entity API, Token and more.

Sorry 😞

[webdobe]

I'm running into same issues on a site with gatsby 3.x...

query MyQuery {
  allNodeArticle(limit: 1, sort: {fields: created, order: DESC}) {
    group(field: id) {
      edges {
        node {
          id
        }
      }
    }
    edges {
      node {
        title
        relationships {
          field_featured_image {
            relationships {
              field_media_image {
                uri {
                  url
                }
              }
            }
          }
        }
      }
    }
  }
}

Image shows there but I am not longer able to use this bit:

localFile {
  childImageSharp {
    fluid(maxWidth: 760, maxHeight: 570) {
      ...GatsbyImageSharpFluid
    }
  }
}

Same error: Cannot query field localFile on type media__image.

[webdobe]

Nvm... Everything works fine... I failed...

I had config: skipFileDownloads: true,