masayagh

In my case to got the attribute value of a specific product Id, I create this graphql field that I integrate on my wordpress code

<?php
// Add this to your theme's functions.php or a custom plugin file

add_action('graphql_register_types', 'register_product_attributes_with_swatches_field');

function register_product_attributes_with_swatches_field() {
    register_graphql_field('Product', 'attributesWithSwatches', [
        'type' => ['list_of' => 'ProductAttributeWithSwatch'],
        'description' => __('Product attributes with swatch information', 'your-textdomain'),
        'resolve' => function($product) {
            $attributes = $product->get_attributes();
            $result = [];

            foreach ($attributes as $attribute) {
                if ($attribute->get_variation()) {
                    $terms = $attribute->get_terms();
                    $attribute_data = [
                        'name' => $attribute->get_name(),
                        'label' => wc_attribute_label($attribute->get_name()),
                        'options' => []
                    ];

                    $attribute_id = wc_attribute_taxonomy_id_by_name($attribute->get_name());
                    $attribute_object = woo_variation_swatches()->get_frontend()->get_attribute_taxonomy_by_id($attribute_id);
                    $attribute_type = sanitize_text_field($attribute_object->attribute_type);

                    foreach ($terms as $term) {
                        $term_id = $term->term_id;
                        
                        $primary_color = sanitize_hex_color(get_term_meta($term_id, 'product_attribute_color', true));
                        $secondary_color = sanitize_hex_color(get_term_meta($term_id, 'secondary_color', true));
                        $is_dual_color = wc_string_to_bool(get_term_meta($term_id, 'is_dual_color', true));
                        $dual_color_angle = woo_variation_swatches()->get_frontend()->get_dual_color_gradient_angle();
                        
                        $image_id = absint(get_term_meta($term_id, 'product_attribute_image', true));
                        $image_size = sanitize_text_field(woo_variation_swatches()->get_option('attribute_image_size', 'variation_swatches_image_size'));
                        
                        $show_tooltip = sanitize_text_field(get_term_meta($term_id, 'show_tooltip', true));
                        $tooltip_text = sanitize_text_field(get_term_meta($term_id, 'tooltip_text', true));
                        $tooltip_image_id = absint(get_term_meta($term_id, 'tooltip_image_id', true));
                        
                        $group = '';
                        $group_name = '';
                        if (woo_variation_swatches()->is_pro()) {
                            $group = sanitize_text_field(get_term_meta($term_id, 'group_name', true));
                            $group_name = sanitize_text_field(woo_variation_swatches_pro()->get_backend()->get_group()->get($group));
                        }

                        $option = [
                            'term_id' => $term_id,
                            'name' => $term->name,
                            'slug' => $term->slug,
                            'attribute_type' => $attribute_type,
                            'primary_color' => $primary_color,
                            'secondary_color' => $secondary_color,
                            'is_dual_color' => $is_dual_color,
                            'dual_color_angle' => $dual_color_angle,
                            'image_id' => $image_id,
                            'image_size' => $image_size,
                            'group' => $group,
                            'group_name' => $group_name,
                            'show_tooltip' => $show_tooltip,
                            'tooltip_text' => $tooltip_text,
                            'tooltip_image_id' => $tooltip_image_id,
                        ];

                        $attribute_data['options'][] = $option;
                    }

                    $result[] = $attribute_data;
                }
            }

            return $result;
        }
    ]);

    register_graphql_object_type('ProductAttributeWithSwatch', [
        'fields' => [
            'name' => ['type' => 'String'],
            'label' => ['type' => 'String'],
            'options' => ['type' => ['list_of' => 'ProductAttributeOption']],
        ]
    ]);

    register_graphql_object_type('ProductAttributeOption', [
        'fields' => [
            'term_id' => ['type' => 'Int'],
            'name' => ['type' => 'String'],
            'slug' => ['type' => 'String'],
            'attribute_type' => ['type' => 'String'],
            'primary_color' => ['type' => 'String'],
            'secondary_color' => ['type' => 'String'],
            'is_dual_color' => ['type' => 'Boolean'],
            'dual_color_angle' => ['type' => 'String'],
            'image_id' => ['type' => 'Int'],
            'image_size' => ['type' => 'String'],
            'group' => ['type' => 'String'],
            'group_name' => ['type' => 'String'],
            'show_tooltip' => ['type' => 'String'],
            'tooltip_text' => ['type' => 'String'],
            'tooltip_image_id' => ['type' => 'Int'],
        ]
    ]);
}

And that how I’m using it on my graphql schema

export const GET_WOOCOMMERCE_PRODUCT_BY_ID = gql<br>  query GetWooCommerceProductById($id: ID!) {<br>    product(id: $id) {<br>      id<br>      databaseId<br>      name<br>      slug<br>      description<br>      shortDescription<br>      onSale<br>      type<br>      image {<br>        sourceUrl<br>        altText<br>      }<br>      attributesWithSwatches {<br>        name<br>        label<br>        options {<br>          term_id<br>          name<br>          slug<br>          attribute_type<br>          primary_color<br>          secondary_color<br>          is_dual_color<br>          dual_color_angle<br>          image_id<br>          image_size<br>          group<br>          group_name<br>          show_tooltip<br>          tooltip_text<br>          tooltip_image_id<br>        }<br>      }<br>      galleryImages {<br>        nodes {<br>          sourceUrl<br>          altText<br>        }<br>      }<br>      ... on SimpleProduct {<br>        price<br>        regularPrice<br>        salePrice<br>        stockStatus<br>        stockQuantity<br>        sku<br>      }<br>      ... on VariableProduct {<br>        price<br>        regularPrice<br>        salePrice<br>        stockStatus<br>        stockQuantity<br>        variations {<br>          nodes {<br>            id<br>            databaseId<br>            name<br>            price<br>            regularPrice<br>            salePrice<br>            stockStatus<br>            stockQuantity<br>            sku<br>            attributes {<br>              nodes {<br>                name<br>                value<br>              }<br>            }<br>          }<br>        }<br>        attributes {<br>          nodes {<br>            name<br>            options<br>            variation<br>            id<br>          }<br>        }<br>      }<br>      ... on ExternalProduct {<br>        price<br>        regularPrice<br>        salePrice<br>        externalUrl<br>        buttonText<br>      }<br>      ... on GroupProduct {<br>        products {<br>          nodes {<br>            ... on SimpleProduct {<br>              id<br>              databaseId<br>              name<br>              price<br>              regularPrice<br>              salePrice<br>            }<br>          }<br>        }<br>      }<br>      productCategories {<br>        nodes {<br>          id<br>          databaseId<br>          name<br>          slug<br>        }<br>      }<br>      productTags {<br>        nodes {<br>          id<br>          name<br>          slug<br>        }<br>      }<br>    }<br>  }<br>;