Querying `imageFile` from two different Wagtail fields in one query

[tbrlpld]

I just ran into this issue and thought I document it here, in case anybody else has this issue.

If you have a page model with two fields holding images (in my case the gallery_images as defined in the Wagtail tutorial and images in a StreamField) then the following query is failing:

{
  wagtail {
    blogPage(slug: "first-article") {
      id
      title
      galleryImages {
        id
        caption
        image {
          imageFile {
            id
          }
        }
      }
      freeformbody {
        id
        field
        ... on ImageChooserBlock {
          image {
            imageFile {
              id
            }
          }
        }
      }
    }
  }
}

I am only querying imageFile.id so you can test the behavior with out the presence of the Gatsby-Image fragments (i.e. in the Gatsby GraphiQL interface)

This is the error response:

{
  "errors": [
    {
      "message": "Response not successful: Received status code 400",
      "locations": [],
      "path": [
        "blogPage"
      ],
      "stack": [
        "ServerError: Response not successful: Received status code 400",
        "    at Object.exports.throwServerError (<...>/node_modules/apollo-link-http-common/lib/index.js:23:17)",
        "    at <...>/node_modules/apollo-link-http-common/lib/index.js:48:21",
        "    at processTicksAndRejections (internal/process/task_queues.js:89:5)"
      ]
    }
  ],
  "data": {
    "wagtail": {
      "blogPage": null
    }
  }
}

Project specific paths are replaced with<...>

To make the above query work you can query image.src additionally to the rest of the data and the query will work as expected.

{
  wagtail {
    blogPage(slug: "first-article") {
      id
      title
      galleryImages {
        id
        caption
        image {
          src  # This is needed to work
          imageFile {
            id
          }
        }
      }
      freeformbody {
        id
        field
        ... on ImageChooserBlock {
          image {
            src  # This is needed to work
            imageFile {
              id
            }
          }
        }
      }
    }
  }
}

I guess this has something to do with the fields being unique, but maybe somebody more experienced can chime in on this.

Is this an issue with gatsby-source-wagtail or a general issue with GraphQL/Gatsby-Image queries?

[tbrlpld]

I just noticed, that while the work around fixes the issue for the normal pages, it still breaks on the preview.

Looking at the developer console in the preview tab, I can see that the requests to the backend /graphql endpoint are failing with status 400. Looking at the payload, I can see that the second occurrence of the imageFile is not replaced like the first one. Forwarding the imageFile query to the backend fails, since this field is added by this plugin and is not really available on the backend.

Here is the example preview payload:

{
    "operationName": "PreviewQuery",
    "variables":
    {},
    "query": "query PreviewQuery {
  page(contentType: "blog.blogpage", token: "id=5:1jzWzJ:r_J1_RpWT89WNaoqILrGYMAVYC8") {
    ... on BlogPage {
      id
      title
      intro
      author
      firstPublishedAt
      live
      slug
      url
      body
      galleryImages {
        id
        caption
        image {
          id
          src
          id
          src
          width
          height
          __typename
        }
        __typename
      }
      freeformbody {
        id
        field
        rawValue
        ... on ImageChooserBlock {
          id
          image {
            id
            src
            title
            imageFile {
              id
              childImageSharp {
                fluid {
                  ...GatsbyImageSharpFluid
                  __typename
                }
                __typename
              }
              __typename
            }
            __typename
          }
          __typename
        }
        __typename
      }
      tags {
        id
        slug
        name
        __typename
      }
      __typename
    }
    __typename
  }
}
"
}

The fact that the image is in a stream field is not important. If the order is changed, then the query is wrong on the galleryImage field.

It seems like only the first occurrence of an imageFile field is correctly processed and replaced in the preview module.

Is this expected behavior or actually a bug?

Is this maybe related to the issue described above, that some uniquely identifying data is required to make the query work even on normal pages? Is this somehow unexpected that two image fields are included in the same query?