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.


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

<config xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\StoreGraphQl\Model\Resolver\Store\StoreConfigDataProvider">
            <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>

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


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


In import section add import dependecies

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

Before return method add below code

             query storeConfigData {
                    storeConfig {

    const { data: storeConfigData } = useQuery(
        { 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

Related Posts

3 thoughts on “How to Get Values from Mageno 2 Store Configuration In PWA / Venia Concept?

  1. My programmer is trying to persuade me to move to .net from PHP.I have always disliked the idea because of the costs.But he’s tryiong none the less. I’ve been using Movable-type on avariety of websites for about a year and am concerned about switching toanother platform. I have heard very good thingsabout Is there a way I can import all my wordpress content into it?Any help would be greatly appreciated!

Leave a Reply

Your email address will not be published. Required fields are marked *