How to fetch system configuration value using graphQl in magento2?

GraphQl is a query language and we can also fetch the data from our module by adding the custom query. First, We need to set the endpoint by entering http://<magento2-server-path>/graphql in the URL bar of IDE or extension.

To fetch the data from store configuration using a custom module and graphql then we need to follow these steps.

1. Define the configuration field in the di.xml file
2. Create the schema.graphqls file, to make a custom query

Let’s see with a practical approach

Step 1. First Create the Module, Add the registration file

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
	\Magento\Framework\Component\ComponentRegistrar::MODULE,
	'Webkul_Custom',
	__DIR__
);

Step 2. Add the module.xml file

File: etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Webkul_Custom">
    </module>
</config>

Step 3. Add the system.xml file to add configuration in the module, We are fetching the same value from the module

File: etc/adminhtml/system.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="webkul" translate="label" sortOrder="10">
            <label>Webkul</label>
        </tab>
        <section id="custom" translate="label" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
            <class>separator-top</class>
            <label>Custom Module</label>
            <tab>webkul</tab>
            <resource>Webkul_Custom::module_config</resource>
            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0">
                <label>General Configuration</label>
                <field id="enable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
                    <label>Module Enable</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="custom_message" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
                    <label>Add Message</label>
                </field>
            </group>
        </section>
    </system>
</config>

Step 4. Define the configuration field in the di.xml file

File: etc/graphql/di.xml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\StoreGraphQl\Model\Resolver\Store\StoreConfigDataProvider">
    <arguments>
        <argument name="extendedConfigData">
            <item name="custom_general_enable" xsi:type="string">custom/general/enable</item>
            <item name="custom_general_custom_message" xsi:type="string">custom/general/custom_message</item>
        </argument>
    </arguments>
</type>
</config>

Here, It will be the path of field: section/group/field

Step 5. Create the schema.graphqls file, to make a custom query

File: etc/schema.graphics

type StoreConfig {
    custom_general_enable  : String  @doc(description: "To check module enable or disable") ,
    custom_general_custom_message: String @doc(description: "To fetch custom text message")
}

We can write our custom query in this way on ChromeiQl.

{
  storeConfig{
    custom_general_enable
    custom_general_custom_message
  }
}

We can get results in this way. If we enable the module then we get 1 otherwise 0 or in the second field we get a value that is saved by the user from the graphql query. It is a simple input field.

{
  "data": {
    "storeConfig": {
      "custom_general_enable": "1",
      "custom_general_custom_message": "Hello Webkul"
    }
  }
}

We can add the ChromeiQL in the chrome browser by clicking on this Link. by using the same process, we can get any system configuration value from the module and we can also get the result of the configuration as per the above image.