Apollo-based GraphQL support

[thinkflo]

Description

I seem to be experiencing a duplicate issue to nystudio107/craft-seomatic#487 and craftcms/cms#5149 where calls on Gridsome or Gatsby produces an error that points to a GraphQL schema related issue. However, if the same call is made with the CraftCMS GraphQL Explorer, then the response in the explorer provides the expected output of the embeddedAsset object. This issue was apparently corrected in CraftCMS 3.3.13 so this may be a regression or a new issue producing the same error condition.

Steps to reproduce

1. Set up CraftCMS in headless mode and ensure sufficient GraphQL permissions to read the Asset volume used for the EmbeddedAssets assets
2. Launch Gridsome and use the Gridsome GraphQL explorer
3. Attempt to query Craft using the Gridsome GraphQL playground accessible at http://localhost:8080/___explore using a query such as:

query {
  craft {
    entry (id: <PageID>) {
      ... on craft_rooms_rooms_Entry { 
        selectedWorks {
          embeddedAsset {
              image
            }
          }
        }             
      }
    }
  } 

and observe the failure:

{
  "errors": [
    {
      "message": "__typename did not match an object type: EmbeddedAsset",
      "stringified": "__typename did not match an object type: EmbeddedAsset\n\nGraphQL request:6:11\n5 |         selectedWorks {\n6 |           embeddedAsset {\n  |           ^\n7 |             image"
    }
  ]
}

Now try the equivalent query using the CraftCMS Explorer at: /admin/graphiql (The only difference between the queries is the craft_ prefix of rooms_rooms_Entry that Gridsome adds with their GraphQL source plugin.

query {
  craft {
    entry (id: <PageID>) {
      ... on rooms_rooms_Entry { 
        selectedWorks {
          embeddedAsset {
              image
            }
          }
        }             
      }
    }
  } 

And observe the expected successful query response.

Other information

• Gridsome version: 0.7.23
• Embedded Assets version: 2.8.0
• Craft CMS version: 3.7.14

[thinkflo]

Investigating this further, I believe that there might be several problems compounding the issue but also that the type reported by the plugin might have a case-sensitivity issue as the __typename that is expected is EmbeddedAsset where the GraphQL error reports it as embeddedAsset. I attempted to change this in the the base Plugin.php and it did remedied the type-based error, but then it produced another error.

This issue definitely seems to be related to the fact that Apollo has better type checking than Craft's GraphQL implementation. And since Apollo is the most popular GraphQL library for frontends, this issue should be widely reproducible using only the Apollo client. A Gridsome installation is likely not necessary to reproduce this error.

[magicspon]

I'm seeing the same when using graphql codegen and graphql-request

the following fragment:

fragment EmbeddedAsset on EmbeddedAssetInterface {
	iframeSrc(params: "autoplay=false")
}

fragment BlockText on blocks_text_BlockType {
	id
	image {
		id
		embeddedAsset {
			...EmbeddedAsset
		}
	}
}

is resolving as the following type:

export type EmbeddedAssetFragment = {}

export type BlockTextFragment = {
	__typename?: 'blocks_text_BlockType'
	id: Maybe<string>
	image: Maybe<
		Array<
			Maybe<
				| {
						__typename?: 'documents_Asset'
						id: Maybe<string>
				  }
				| {
						__typename?: 'images_Asset'
						id: Maybe<string>
						embeddedAsset: Maybe<never>
				  }
				| {
						__typename?: 'video_Asset'
						id: Maybe<string>
						embeddedAsset: Maybe<never>
				  }
			>
		>
	>
}

If i set onlyOperationTypes: false in my codegen config the fragment type doesn't change. But the following type is produced for the EmbeddedAssetInterface fragment

export type EmbeddedAssetInterface = {
	/** The aspect ratio for the embedded asset. */
	aspectRatio: Maybe<Scalars['Float']>
	/** The author name for the embedded asset. */
	authorName: Maybe<Scalars['String']>
	/** The author URL for the embedded asset. */
	authorUrl: Maybe<Scalars['String']>
	/** The code for the embedded asset. */
	code: Maybe<Scalars['String']>
	/** The description of the embedded asset. */
	description: Maybe<Scalars['String']>
	/** The feeds for the embedded asset. */
	feeds: Maybe<Array<Maybe<Scalars['String']>>>
	/** The height for the embedded asset. */
	height: Maybe<Scalars['Int']>
	/** The embed HTML for the embedded asset. */
	html: Maybe<Scalars['String']>
	/** The embed code for the embedded asset, if the embedded asset's code is an iframe. */
	iframeCode: Maybe<Scalars['String']>
	/** The embed URL for the embedded asset, if the embedded asset's code is an iframe. */
	iframeSrc: Maybe<Scalars['String']>
	/** The image for the embedded asset. */
	image: Maybe<Scalars['String']>
	/** The image height for the embedded asset. */
	imageHeight: Maybe<Scalars['Int']>
	/** The image width for the embedded asset. */
	imageWidth: Maybe<Scalars['Int']>
	/** The images for the embedded asset. */
	images: Maybe<Array<Maybe<Image>>>
	/** Whether or not the the embed code is safe to use. */
	isSafe: Maybe<Scalars['Boolean']>
	/** The license for the embedded asset. */
	license: Maybe<Scalars['String']>
	/** The provider icon for the embedded asset. */
	providerIcon: Maybe<Scalars['String']>
	/** The provider icons for the embedded asset. */
	providerIcons: Maybe<Array<Maybe<Image>>>
	/** The provider name for the embedded asset. */
	providerName: Maybe<Scalars['String']>
	/** The provider URL for the embedded asset. */
	providerUrl: Maybe<Scalars['String']>
	/** The published time of the embedded asset. */
	publishedTime: Maybe<Scalars['String']>
	/** The tags for the embedded asset. */
	tags: Maybe<Array<Maybe<Scalars['String']>>>
	/** The title of the embedded asset. */
	title: Maybe<Scalars['String']>
	/** The type of the embedded asset. */
	type: Maybe<Scalars['String']>
	/** The url of the embedded asset. */
	url: Maybe<Scalars['String']>
	/** The width for the embedded asset. */
	width: Maybe<Scalars['Int']>
}

codegen config:

{
	"overwrite": true,
	"hooks": {
		"afterOneFileWrite": ["prettier --write"]
	},
	"schema": [
		{
			"${CRAFT_CMS_GRAPHQL_ENDPOINT}": {
				"headers": {
					"authorization": "bearer ${CRAFT_CMS_GRAPHQL_TOKEN}"
				}
			}
		}
	],
	"documents": "src/**/*.graphql",
	"generates": {
		"src/schema/graphql.ts": {
			"plugins": [
				"typescript",
				"typescript-operations",
				"typescript-graphql-request"
			],
			"config": {
				"onlyOperationTypes": true,
				"maybeValue": "T",
				"avoidOptionals": {
					"field": true,
					"inputValue": true,
					"object": true,
					"defaultValue": true
				}
			}
		}
	}
}

[ttempleton]

Thanks for reporting this — fixed now in Embedded Assets 2.9.1.