gatsby: data is "undefined" by graphql gatsby

I am using graphql for querying. query is not running in my code. but on graphql it is working fine. Heres my files package.json

{
    "gatsby": "latest",
    "gatsby-link": "latest",
    "gatsby-source-filesystem": "latest",
    "gatsby-transformer-remark": "^1.7.40",
    "react-helmet": "5.0.3",
}

gatsby-node.js
exports.createLayouts = async ({
  boundActionCreators
}) => {
  const {
    createLayout
  } = boundActionCreators;
  const token = await sakeAuth.credentials.getToken();
  const options = {
    headers: {
      Authorization: `Bearer ${token.accessToken}`
    }
  };
exports.onCreateNode = ({ node, getNode, boundActionCreators }) => {
  const { createNodeField } = boundActionCreators;
  // console.log(node.internal.type);
  if (node.internal.type === `FaqsJson`) {
    const slug = createFilePath({ node, getNode, basePath: `pages` });
    console.log("==========>", slug);
    createNodeField({
      node,
      name: `slug`,
      value: slug
    });
  }
};

exports.createPages = ({
  graphql,
  boundActionCreators
}) => {
  return new Promise(resolve => {
    graphql(`
    {
      allFaqsJson {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
    `).then(result => {
        const { createPage } = boundActionCreators;
        console.log("result=================>", result.data.allFaqsJson);
        result.data.allFaqsJson.edges.forEach(({ node }) => {
          console.log(`create page for=========> ${node.fields.slug}`);
          createPage({
            path: node.fields.slug,
            component: path.resolve(`./src/templates/faqs.tsx`),
            context: {
              // Data passed to context is available in page queries as GraphQL variables.
              slug: node.fields.slug
            }
          });
        });
        resolve();
      });
  });
};

in src/templates/faqs.tsx

import { css, merge } from "glamor";
import * as React from "react";
import { InjectedIntlProps, injectIntl } from "react-intl";
interface OwnProps extends React.HTMLProps<HTMLDivElement> {
  styles?: React.CSSProperties;
}

interface State { }

type Props = OwnProps & InjectedIntlProps;

class Faqs extends React.Component<Props, State> {

  constructor(props: Props) {
    super(props);
  }
  public componentDidMount() {
    const { data } = this.props;
    console.log("===>>>>", data); // Here data is undefined :-(
  }
  public render() {
    const { data } = this.props;
    console.log("template", data); // Here data is undefined :-(
    return (
      <div>
        faqs
      </div>
    );
  }

}

export const query = graphql`
  query fqlQuery($slug: String!) {
    allFile {
      edges{
        node{
          childFaqsJson{
            title
          }
        }
      }
    }
  }
`;

export default injectIntl(Faqs);

in .cache/json faqs.json file is not creating. Can any body help in it?