I have created a custom extension in Magento 2 and their frontend functionality shows in the react js (PWA vania UI).

So I have created a module to enable/disable functionality in the Magento system configuration. and I have added this custom extension page link to the PWA footer.

However, I need this functionality when my module is disabled from the system configuration so that the time footer link does not show in the PWA.

Does anyone have any idea about it so please give me the answer.


1 Answer 1


Please follow the below steps as per my module.

Now I will add some of my code for the created module graphql.


<?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">
        <argument name="extendedConfigData">
            <item name="faq_general_statusfaq" xsi:type="string">faq/general/statusfaq</item>
            <item name="faq_general_statusfaqfooter" xsi:type="string">faq/general/statusfaqfooter</item>


add below code

type StoreConfig {
faq_general_statusfaq : Int
faq_general_statusfaqfooter : Int

Execute URL:
Where Base URL: and End Point: graphql

Request Body :

storeConfig {

Step 1: Create the component you want. my component name is Faqlink.

So please create your component. my component path is below


add the below code as per your requirement.

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

export const GET_STORE_CONFIG_DATA = gql`
query GetStoreConfigForFaq {
    # eslint-disable-next-line @graphql-eslint/require-id-when-available
    storeConfig {

 export default {
    getStoreConfigQuery: GET_STORE_CONFIG_DATA


export { default } from './faqlink';


 import React from 'react';
 import { useQuery } from '@apollo/client';
 import { GET_STORE_CONFIG_DATA } from './faq.gql';
 import { fullPageLoadingIndicator } from "@magento/venia- 
 import ErrorView from "@magento/venia-ui/lib/components/ErrorView";

 export const FaqLink = () => {

  const { loading: loadingConfig, error: errorConfig, data: dataConfig } 
    fetchPolicy: 'cache-and-network',
    nextFetchPolicy: 'cache-first'

if (loadingConfig) return fullPageLoadingIndicator;
if (errorConfig) return <ErrorView message={errorConfig?.message} />;

const storeConfig = dataConfig.storeConfig;
const footerfaqlinkstatus = storeConfig.faq_general_statusfaqfooter;
 return footerfaqlinkstatus == '1' ? (
    <li className="footer-linkItem-vqn first_text-colorDefault 
   first_font-semibold"><a data-cy='Footer-link' href='/faq'>Faq</a></li>
    ) : null;

After that override footer.js show please check the below link on how to override the footer.


after overriding the footer then your footer.js file changes below code.

import { DEFAULT_LINKS, LOREM_IPSUM } from "@magento/venia- 


import { DEFAULT_LINKS, LOREM_IPSUM } from './sampleData';

Then copy a file from /var/www/html/yourproject/node_modules/@magento/venia-ui/lib/components/Footer/sampleData.js

paste this file to your component. my component file is checked below.

/var/www/html/proect/@mage2/faq/src/components/faq/sampleData.js and this file add the below code.

import { ContactLink } from '@magento/venia- 
import { FaqLink } from "../Faqlink/faqlink";

const accountLinks = new Map()
.set('Account', null)
.set('Sign In', null)
.set('Register', null)
.set('Order Status', null)
.set('Returns', null);

const aboutLinks = new Map()
.set('About Us', '/about-us')
.set('Our Story', null)
.set('Email Signup', null)
.set('Give Back123', null);

const helpLinks = new Map()
.set('Help', null)
.set('Customer Service', '/customer-service')
.set('Contact Us', {
    path: '/contact-us',
    Component: ContactLink
.set('Faq', {
    path: '/faq',
    Component: FaqLink

.set('Order Status', null)
.set('Returns', null);

 export const DEFAULT_LINKS = new Map()
 .set('account', accountLinks)
 .set('about', aboutLinks)
 .set('help', helpLinks);

 export const LOREM_IPSUM =
  'Lorem ipsum dolor sit amet, consectetur adipsicing elit, sed do.';

after applying commands.

yarn run watch

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.