Query Subscription Error: No such type ImageFileField, so it can't be a fragment condition

[brian1]

Getting the following error back when I useQuerySubscription for my live preview.

{"response":{"errors":[{"path":["fragment StructuredTextImage"],"message":"No such type ImageFileField, so it can't be a fragment condition","locations":[{"line":94,"column":1}],"extensions":{"typeName":"ImageFileField","code":"undefinedType"}}]},"fatal":true,"message":"The query returned an erroneous response. Please consult the response details to understand the cause.","code":"INVALID_QUERY"}

Funny thing is I’m passing the same exact graphql to my non-subscription query and everything is fine. The issue seems to explicitly stem from using fragments on ImageFileField in subscription queires.

Here is my fragment…

export const StructuredTextImageFragment = graphql(
  /* GraphQL */ `
    fragment StructuredTextImage on ImageFileField {
      width
      height
      title
      alt
      landscape: responsiveImage(imgixParams: { fit: crop, ar: "4:3", w: 640, auto: format }) {
        ...ResponsiveImage
      }
      portrait: responsiveImage(
        imgixParams: { fit: crop, w: 640, maxH: 800, ar: "5:6", fill: blur, auto: format }
      ) {
        ...ResponsiveImage
      }
    }
  `,
  [ResponsiveImageFragment],
);

[roger]

@brian1 can you share more of the code? Like what are you using to make a non-subscription query (is it maybe just stringifying and not actually checking the type of the TadaDocumentNode?)

You can try FileField or FileFieldInterface instead of ImageFileField to see if that helps? Or if you can share more code, we can troubleshoot further?

FWIW it does work for me:

(Where thumbnail is a fragment on ImageFileField and useQuerySubscription was previously executeQuery from our CDA client.)

[brian1]

Thanks @roger. I’m using tada and @datocms/cda-client as well. I do think I got to the bottom of it though.

Jotting my findings here as I can see it helping some other folks…

So switching to FileFieldInterface did work, but then I’m not getting the nice type behavior of ImageFileField in my components.

Then it dawned on me, the field validation plays a role here…

Adding this validation, when combined with excludeInvalid: true on the query is key to the image field being typed as ImageFileField.

We do have excludeInvalid: true set in our executeQuery options, but did not mirror that setting in our useQuerySubscription options. Adding it made ImageFileField work.

  const { data } = useQuerySubscription<TData, TVariables>({
    query,
    variables,
    enabled: true,
    excludeInvalid: true, // 👈 This was the key
    includeDrafts: true,
    token,
  });

[roger]

Nice catch! Thank you for sharing

And yeah, our TypeScript types can be a bit of a black box sometime, especially when multiple packages are involved. It’s something the devs can are looking into; hopefully we can clean them up a bit and make then more user-friendly in the future.