How to refetch graphql data for gatsby build? - graphql

Question

I have a gatsby-theme React application that uses gatsby-source-graphql to fetch the data from my back-end application. I had set the refetchInterval: 20 in my gatsby-config.js file. My gastby-config.js file is as below
module.exports = {
siteMetadata: {
title: 'Gatsby Theme Mytheme',
...
},
pathPrefix: `/gtm`,
plugins: [
{
...
...
{
resolve: `gatsby-source-graphql`,
options: {
fieldName: `cms`,
url: `http://127.0.0.1:7000/api/graphiql`,
typeName: `CMSData`,
refetchInterval: 20,
},
},
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
],
};
When I run the application in the development mode (gatsby develop) I'm able to see (console.log) the changes made in the back-end CMS application after an interval of 20 seconds. But the changes are not able to see/display on the build (gatsby build). Therefore after the build, whatever I change in the backed it is not reflected in my front-end application. So how can I fetch the changes from the back-end application for my a gatsby build dynamically?
The component I use to fetch the back-end GraphQL data is given as
import { useStaticQuery, graphql } from "gatsby";
export function myComponent() {
const cmsMenu = useStaticQuery(graphql`
{
cms {
allMenus {
edges {
node {
menuName
}
}
}
}
}
`)
console.log("CMS menu from MenuProvider", cmsMenu);
}