register-custom-form-field.md

Recipes

How to: register query support for a custom Gravity Forms Field

__To see this patterns in action, take a look in src/Extensions.

While this plugin offers basic support for custom Gravity Forms fields out of the box, in many cases you will want to extend the GraphQL schema to provide your custom field data.

The below methods can also be used to add extended support for core Gravity Form fields that are not yet fully supported.

Note: You will need to add a FormFieldValueInput in order to be able submit/update your Gravity Forms field.

Method 1: Quick and Dirty

If you're only adding a few fields to the schema, WPGraphQL's native register_graphql_field() should do the trick.

For example:

register_graphql_field(
  'MyCustomFormField', // This is autogenerated by the plugin based on the GF_Field::$type. Check the schema for the correct name.
  'myCustomProperty',
  [
    'type' => 'String',
    'description' => __( 'This is a custom property that exists on my custom GF field', 'my-plugin' ),
    'resolve' => fn( $source ) => $source->my_custom_property // if the GF_Field property is the same name as the GraphQL field, this can be ommitted.
  ]
);

The same approach would also would to resolve a custom Form field value:

register_graphql_field(
  'myCustomFormField', // This is autogenerated by the plugin based on the GF_Field::$type. Check the schema for the correct name.
  'myCustomFormFieldValue',
  [
    'type' => 'MyCustomFormFieldValueObject',
    'description' => __( 'The Field Value object for my custom GF field.', 'my-plugin'),
    'resolve' => function( $source ){
      /**
       * Usually, the entry is saved in the formField's context/
       * If you are fetching this field in a custom setup, you may need to use GFAPI::get_entry().
       */
      if( ! isset( $context->gfEntry->entry ) ){
        return null;
      }

      // Grab the field value from the entry, null if it isnt set.
      $value = $context->gfEntry->entry[ $source->id ] ?? null;

      // This will be resolved by `MyCustomFieldFieldValueObject`.
      return process_my_custom_field_value($value);
    }
  ]
);

Method 2: Registering a specific field based on the Form Field settings.

For complex Form fields, or groups of Form fields that share the a similar set of properties, it may often be a better practice to have your custom GraphQL fields registered automatically using GF_Field::get_form_editor_field_settings() .

To add support for your custom field settings, you can make use of the graphql_gf_form_field_setting_fields filter:

add_filter(
  'graphql_gf_form_field_setting_fields',
  function( array $fields, \GF_Field $field, array $settings, array $interfaces ) {
    // Bail early if the GF_Field doesn't meet certain conditions.
    if (
      ! in_array( self::$type, $interfaces, true ) ||
      in_array( $field->type, [ 'address', 'email', 'name' ], true )
    ) {
      return $fields;
    }

    // Add `myCustomField` to the GraphQL type.
    $fields['myCustomField'] = [
      'type'        => 'String',
      'description' => __( 'The autocomplete attribute for the field.', 'wp-graphql-gravity-forms' ),
    ];

    return $fields;

  },
  10,
  4
);

Method 3: Registering a GraphQL Interface that represents the Form Field setting.

You can automatically register a unique set of GraphQL fields representing a Form Field setting, that will get applied automatically to any Gravity Forms field that implements the particular setting.

With this method, you can also register specific GraphQL fields directly onto the GraphQL object types that inherit this Interface, which can be particularly useful when creating complex Gravity Forms fields that can have several possible input types.

To do so, create a PHP Class that extends WPGraphQL\GF\Type\WPInterface\FieldSetting\AbstractFieldSetting, and then hook the interface into WordPress using the graphql_gf_registered_form_field_setting_classes filter.

A similar method can be used for extending GfFieldChoice and GfFieldInput types.

Form Fields with dynamic types

Gravity Forms currently has no standardized way of knowing the possible input types a Form Field might use. When adding support for a custom Form Field that supports multiple input types, you need to manually define what those types are.

This can be done by overriding the array of key-value pairs of GF_Field types and the GraphQL Type to generate with the graphql_gf_form_field_child_types filter.

add_filter(
  'graphql_gf_form_field_child_types',
  function( array $possible_input_types, array $field_type ) : array {
    // Add support for a custom field.
    if( 'mycustomfield' = $field_type ) {
      $possible_input_types = [
        'checkbox' => 'MyCustomCheckboxField',
        'radio' => 'MyCustomRadioField',
      ];
    }

    // Change the possible input types for an existing GF Field.
    if( 'post_custom_field' === $field_type ) {
      // Add an input type.
      $possible_input_types[] = [ 'mycustomfield' => 'PostCustomMyCustomField' ];

      // Remove an input type
      unset( $possible_input_types['list'] );
    }
  }
  10,
  2
);