How to Get Values from Mageno 2 Store Configuration In PWA / Venia Concept?

Here I am using as example of Store Name and Store Phone Number configuration values so please replace with your configurations.

In today’s article, we will guide you about steps to fetch configurations values programmatically in Magento 2.

Steps to Fetch Configurations From Magento 2 to PWA:

Step 1: First, we need to create a “di.xml” file inside your module at the below path.

app\code\YourNamesapce\YourModule\etc\graphql\di.xml

<?xml version="1.0" encoding="UTF-8"?>

<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" xsi:type="array">
                <item name="general_store_information_name" xsi:type="string">general/store_information/name</item>
                <item name="general_store_information_phone" xsi:type="string">general/store_information/phone</item>
            </argument>
        </arguments>
    </type>
</config>

Step 2: After that, we need to create a “schema.graphqls” file inside the below folder path of the extension.

app\code\YourNamesapce\YourModule\etc\schema.graphqls

type StoreConfig {
    general_store_information_name: String @doc(description: "General Store Name")
    general_store_information_phone: String @doc(description: "General Store Phone")
}

Step 3: After that, run magento necessary commands of setup upgrade and compile.

Steps to read configurations in PWA / Venia Concept:

So I am adding this store name and phone number in top header container so you can add anywhere you want.

Step 1: we need to add / update code in the below path

packages/venia-ui/lib/components/Header/header.js

In import section add import dependecies

import { gql, useQuery } from '@apollo/client';

Before return method add below code

const STORE_CONFIG_VALUES_GQL = gql`
             query storeConfigData {
                    storeConfig {
                        store_code
                        general_store_information_name
                        general_store_information_phone
                    }
                }
    `;

    const { data: storeConfigData } = useQuery(
        STORE_CONFIG_VALUES_GQL,
        { fetchPolicy: 'cache-and-network' }
    );

    const storeName = storeConfigData
        ? storeConfigData.storeConfig.general_store_information_name
        : null;

    const storePhone = storeConfigData
        ? storeConfigData.storeConfig.general_store_information_phone
        : null;

So now wherever you want you can place the variables under the return method.

<header className={rootClass} data-cy="Header-root">
<div className={classes.storeInfo}>{storeName} {storePhone}</div>
...

Finally, Result

Let me know any feedback or concerns and please share and comment on this blog so it will give more encouragement for me and i will come with more new blogs.

Thank You