wp-graphql-redux-with-media-item.php

add_action( 'plugins_loaded', function() {

	if ( ! class_exists( 'Redux' ) ) {
		return;
	}

	add_action( 'redux/loaded', function( $redux ) {

		if ( ! isset( $redux->sections ) || empty( $redux->sections ) ) {
			return;
		}

		$opt_name = $redux->args['opt_name'];

		foreach ( $redux->sections as $section_id => $section ) {

			if ( isset( $section['show_in_graphql'] ) && true === $section['show_in_graphql'] ) {
				$graphql_field_name = isset( $section['graphql_name'] ) ? \WPGraphQL\Utils\Utils::format_field_name( $section['graphql_name'] ) : \WPGraphQL\Utils\Utils::format_field_name( $section['title'] . '_Settings' );
				$graphql_type_name  = ! empty( $graphql_field_name ) ? \WPGraphQL\Utils\Utils::format_type_name( $graphql_field_name ) : null;

				if ( empty( $graphql_type_name ) ) {
					return;
				}

				if ( ! isset( $section['fields'] ) || empty( $section['fields'] ) || ! is_array( $section['fields'] ) ) {
					return;
				}

				$fields = [];

				foreach ( $section['fields'] as $setting_field ) {
					if ( isset( $setting_field['show_in_graphql'] ) && false === $setting_field['show_in_graphql'] ) {
						return;
					}

					$field_type        = isset( $setting_field['graphql_type'] ) ? $setting_field['graphql_type'] : 'String';
					$field_description = isset( $setting_field['desc'] ) ? $setting_field['desc'] : '';

					$field_name = isset( $setting_field['graphql_name'] ) ? \WPGraphQL\Utils\Utils::format_field_name( $setting_field['graphql_name'] ) : \WPGraphQL\Utils\Utils::format_field_name( $setting_field['title'] );

					$fields[ $field_name ] = [
						'type'        => $field_type,
						'description' => $field_description,
						'resolve'     => function( $source, $args, $context, $info ) use ( $opt_name, $redux, $setting_field, $field_type) {

							$value = Redux::getOption( $opt_name, $setting_field['id'], '' );

							switch ( $field_type ) {
								case 'MediaItem':
									return ! empty( $value['id'] ) ? $context->get_loader( 'post' )->load_deferred( absint( $value['id'] ) ) : null;
								default:
									return $value;
							}

						}
					];

				}

				if ( empty( $fields ) ) {
					return;
				}

				register_graphql_object_type( $graphql_type_name, [
					'description' => ! empty( $section['desc'] ) ? $section['desc'] : sprintf( __( '%s Settings Section from Redux Framework', 'wp-graphql-redux' ) ),
					'fields'      => $fields
				] );

				register_graphql_field( 'RootQuery', $graphql_field_name, [
					'type'    => $graphql_field_name,
					'resolve' => function() use ( $section ) {
						return $section;
					}
				] );

			}

		}

	} );

} );

add_action( 'plugins_loaded', function() {
	$opt_name = 'graphql_demo';

	$theme = wp_get_theme(); // For use with some settings. Not necessary.

	$args = array(
		'display_name'    => $theme->get( 'Name' ),
		'display_version' => $theme->get( 'Version' ),
		'menu_title'      => esc_html__( 'Sample Options', 'redux-framework-demo' ),
		'customizer'      => true,
	);

	Redux::setArgs( $opt_name, $args );

	Redux::setSection( $opt_name, array(
		'title'           => esc_html__( 'Basic Field', 'redux-framework-demo' ),
		'show_in_graphql' => true,
		'graphql_name'    => 'myReduxSettingsSection',
		'id'              => 'basic',
		'desc'            => esc_html__( 'Basic field with no subsections.', 'redux-framework-demo' ),
		'icon'            => 'el el-home',
		'fields'          => array(
			array(
				'id'              => 'opt-text',
				'type'            => 'text',
				'show_in_graphql' => true,
				'graphql_type'    => 'String',
				'graphql_name'    => 'exampleText',
				'title'           => esc_html__( 'Example Text', 'redux-framework-demo' ),
				'desc'            => esc_html__( 'Example description.', 'redux-framework-demo' ),
				'subtitle'        => esc_html__( 'Example subtitle.', 'redux-framework-demo' ),
				'hint'            => array(
					'content' => 'This is a <b>hint</b> tool-tip for the text field.<br/><br/>Add any HTML based text you like here.',
				)
			),
			[
				'id'              => 'testImage',
				'type'            => 'media',
				'show_in_graphql' => true,
				'graphql_type'    => 'MediaItem',
				'graphql_name'    => 'testImage',
				'title'           => 'Test Image'
			]
		)
	) );
});