Add Pages GraphQL refactoring.

[omar-shahid]

I am trying to refactor my GraphQL queries, and couldn't find any resource on this topic. People are saying it is not possible (https://stackoverflow.com/a/51690033/9795654). I don't know if the statement above is still valid, as I couldn't find any information about this.
I am basically trying to do this for GraphQL CodeGen to generate the TypeScript types for the queries. Please let me know how to do this. I tried to import a GraphQL file using a gatsby plugin(gatsby-plugin-graphql-loader) and inject query using string interpolation, but it is not working.

GraphQL File:

query ContentfulBlogPostBySlug(
  $slug: String! 
  $previousPostId: String 
  $nextPostId: String
  ) {

    site: site {
      siteMetadata {
        title
      }
    }

    previous: contentfulPost(id: {eq:  $previousPostId}){
      title
      id
      slug
      
    }
    next: contentfulPost(id: {eq:  $nextPostId}){
      title
      id
      slug
      
    }
    contentfulPost: contentfulPost(slug: {eq: $slug}) {
      title
      author
      subTitle
      createdAt

      post{
        raw
      }
      image {
        title
        file {
          url
        }
      }
    }
  }

Gatsby Page:

import React from "react"
import { Link, graphql, PageProps } from "gatsby"

import Bio from "../components/bio"
import Layout from "../components/layout"
import SEO from "../components/seo"
// import {documentToReactComponents} from "@contentful/rich-text-react-renderer"
import { renderRichText} from "gatsby-source-contentful/rich-text"
import { ContentfulBlogPostBySlugQuery } from "../types/generated"
// @ts-ignore
import a from "./../graphql/queries/singleBlog.graphql"

interface Props extends ContentfulBlogPostBySlugQuery {}


const BlogPostCustom: React.FC<PageProps<Props>> = (props) => {
  const { data, location } = props
  const post = data.contentfulPost
  const siteTitle = data.site.siteMetadata?.title || `Title`
  const { previous, next } = data

  return (
    <Layout location={location} title={siteTitle}>
      <SEO
        title={post.title}
        description={"Hello World"}
      />
      <article
        className="blog-post"
        itemScope
        itemType="http://schema.org/Article"
      >
        <header>
          <h1 itemProp="headline">{post.title}</h1>
          <p>{post.createdAt}</p>
        </header>
        <section
          // dangerouslySetInnerHTML={{ __html:  }}
          itemProp="articleBody"
        >
          {console.log(post)}
          {renderRichText(post.post as unknown as any)}
        </section>
        <hr />
        <footer>
          <Bio />
        </footer>
      </article>
      <nav className="blog-post-nav">
        <ul
          style={{
            display: `flex`,
            flexWrap: `wrap`,
            justifyContent: `space-between`,
            listStyle: `none`,
            padding: 0,
          }}
        >
          <li>
            {previous && (
              <Link to={"/" + previous?.slug} rel="prev">
                ← {previous?.title}
              </Link>
            )}
          </li>
          <li>
            {next && (
              <Link to={"/" + next?.slug} rel="next">
                {next?.title} →
              </Link>
            )}
          </li>
        </ul>
      </nav>
    </Layout>
  )
}

export default BlogPostCustom
export const pageQuery = graphql`${a}`

Please let me know how to achieve this.