fix: children of imageFile missing on build

.editorconfig

@@ -0,0 +1,18 @@
+root=true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+indent_style = tab
+trim_trailing_whitespace = true
+
+[{package.json,*.yml,*.yaml}]
+indent_style = space
+indent_size = 2
+
+[Dockerfile]
+indent_style = tab
+
+[Makefile]
+indent_style = tab

.eslintrc.js

@@ -0,0 +1,71 @@
+const defaultRules = {
+	// No console statements in production
+	'no-console': process.env.NODE_ENV !== 'development' ? 'error' : 'off',
+	// No debugger statements in production
+	'no-debugger': process.env.NODE_ENV !== 'development' ? 'error' : 'off',
+	// Enforce prettier formatting
+	'prettier/prettier': 'error',
+};
+
+module.exports = {
+	// Stop looking for ESLint configurations in parent folders
+	root: true,
+	// Global variables: Browser and Node.js
+	env: {
+		browser: true,
+		node: true,
+	},
+	// Basic configuration for js files
+	plugins: ['@typescript-eslint', 'prettier'],
+	extends: ['eslint:recommended', 'prettier'],
+	rules: defaultRules,
+	parserOptions: {
+		ecmaVersion: 2020,
+	},
+	overrides: [
+		// Parse rollup configuration as module
+		{
+			files: ['rollup.config.js', 'vite.config.js'],
+			parserOptions: {
+				sourceType: 'module',
+			},
+		},
+		{
+			files: ['**/*.test.js'],
+			env: {
+				jest: true,
+			},
+			plugins: ['jest'],
+		},
+		// Configuration for ts/vue files
+		{
+			files: ['*.ts', '*.vue'],
+			parser: 'vue-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser',
+			},
+			extends: [
+				'plugin:vue/vue3-recommended',
+				'eslint:recommended',
+				'plugin:@typescript-eslint/recommended',
+				'prettier',
+			],
+			rules: {
+				...defaultRules,
+				'vue/multi-word-component-names': 'off',
+				// It's recommended to turn off this rule on TypeScript projects
+				'no-undef': 'off',
+				// Allow ts-directive comments (used to suppress TypeScript compiler errors)
+				'@typescript-eslint/ban-ts-comment': 'off',
+				// Allow usage of the any type (consider to enable this rule later on)
+				'@typescript-eslint/no-explicit-any': 'off',
+				// Allow usage of require statements (consider to enable this rule later on)
+				'@typescript-eslint/no-var-requires': 'off',
+				// Allow non-null assertions for now (consider to enable this rule later on)
+				'@typescript-eslint/no-non-null-assertion': 'off',
+				// Allow unused arguments and variables when they begin with an underscore
+				'@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+			},
+		},
+	],
+};

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 node_modules
 .vscode
+yarn.lock

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+	htmlWhitespaceSensitivity: 'ignore',
+	printWidth: 120,
+	singleQuote: true,
+	useTabs: true,
+	proseWrap: 'always',
+};

gatsby-node.js

@@ -35,14 +35,17 @@ exports.pluginOptionsSchema = ({ Joi }) => {
 /**
  * Gatsby source implementation.
  */
+
 exports.sourceNodes = async (gatsbyOptions, pluginOptions) => {
+	const { actions: { createNode }, createNodeId, store, cache, reporter } = gatsbyOptions
+	const { headers } = await plugin.getOptions();
+	const { Authorization } = await headers();
+
 	await plugin.setOptions(pluginOptions);
 
 	const optionsSystem = plugin.getOptionsSystem();
 	const options = plugin.getOptions();
 
-	const createNode = gatsbyOptions.actions.createNode;
-
 	// Avoid type conflict with gatsby-source-graphql
 	gatsbyOptions.actions.createNode = (node) => {
 		if (node.internal.type === 'GraphQLSource') {
@@ -55,6 +58,34 @@ exports.sourceNodes = async (gatsbyOptions, pluginOptions) => {
 
 	await sourceNodes(gatsbyOptions, optionsSystem);
 	await sourceNodes(gatsbyOptions, options);
+
+	// Load images here rather than on file resolution.
+	// Create a node for each image and store it in the cache
+	// so it can bre retrieved on file resolution.
+	const remoteImages = await plugin.getAllImages();
+	remoteImages.forEach(async (image) => {
+		const cachedImage = await cache.get(image.id)
+		if (cachedImage !== undefined) {
+			return
+		}
+		const nameParts = image.filename_download.split('.');
+		const ext = nameParts.length > 1 ? `.${nameParts.pop()}` : '';
+		const name = nameParts.join('.');
+		const imageUrl = `${plugin.url}assets/${image.id}`;
+		const img = await createRemoteFileNode({
+			url: imageUrl,
+			parentNodeId: image.id,
+			store,
+			cache,
+			createNode,
+			createNodeId,
+			httpHeaders: { Authorization },
+			reporter,
+			ext,
+			name,
+		});
+		await cache.set(image.id, img);
+	})
 };
 
 exports.createSchemaCustomization = async (gatsby, pluginOptions) => {
@@ -67,44 +98,16 @@ exports.createSchemaCustomization = async (gatsby, pluginOptions) => {
 /**
  * Gatsby file implementation.
  */
-exports.createResolvers = async ({ actions, cache, createNodeId, createResolvers, store, reporter }, pluginOptions) => {
+exports.createResolvers = async ({ cache, createResolvers }, pluginOptions) => {
 	await plugin.setOptions(pluginOptions);
 
-	const { createNode } = actions;
-
-	const { headers } = await plugin.getOptions();
-	const { Authorization } = await headers();
-
 	const fileResolver = {
 		imageFile: {
 			type: `File`,
 			async resolve(source) {
-				if (!source || !source.id) return null;
-
-				let filename_download = plugin.fileCache.get(source.id);
-
-				if (!filename_download) {
-					if (source.filename_download) filename_download = source.filename_download;
-					else ({ filename_download } = await plugin.directus.files.readOne(source.id));
-
-					plugin.fileCache.set(source.id, filename_download);
-				}
-
-				const nameParts = filename_download.split('.');
-				const ext = nameParts.length > 1 ? `.${nameParts.pop()}` : '';
-				const name = nameParts.join('.');
-
-				return createRemoteFileNode({
-					url: `${plugin.url}assets/${source.id}`,
-					store,
-					cache,
-					createNode,
-					createNodeId,
-					httpHeaders: { Authorization },
-					reporter,
-					ext,
-					name,
-				});
+				// Lookup the cached image node and return it
+				const cachedFile = await cache.get(source.id);
+				return cachedFile;
 			},
 		},
 	};
@@ -208,6 +211,15 @@ class Plugin {
 		};
 	}
 
+	/**
+	 * Method to retrieve all of the images in directus.files
+	 */
+	async getAllImages() {
+		const files = await this.directus.files.readByQuery({ limit: -1 });
+		const imageFiles = files.data.filter(file => file.type.indexOf('image') > -1);
+		return imageFiles;
+	}
+
 	async headers() {
 		let headers = {};
 		if (typeof this.options?.headers === 'object') {

package.json

@@ -19,5 +19,8 @@
 	"bugs": {
 		"url": "https://github.com/directus/directus/issues"
 	},
-	"gitHead": "24621f3934dc77eb23441331040ed13c676ceffd"
+	"gitHead": "24621f3934dc77eb23441331040ed13c676ceffd",
+	"devDependencies": {
+		"eslint-config-prettier": "^8.5.0"
+	}
 }