Gatsby: Resolving the issue where tslint requires a component to receive props directly from the query within the component

Question

Gatsby: Resolving the issue where tslint requires a component to receive props directly from the query within the component

Utilizing Gatsby along with Typescript, I have been working on developing a blog that is powered by Contentful CMS.

In the process, I have created a FeaturedPost component that I intend to showcase on the main page, and here is the implementation:

FeaturedPost.tsx

interface IProps {
  data: {
    contentfulPost: ContentfulPost;
  };
}

const FeaturedPost: React.FunctionComponent<IProps> = ({ data }) => {
  const { title, description } = data.contentfulPost;
  return (
    <>
      <Header>{title}</Header>;
      <div>{description}</div>
    </>
  );
};

export const query = graphql`
  query featuredPost($slug: String) {
    contentfulPost(slug: { eq: $slug }) {
      title
      slug
      description {
        childMarkdownRemark {
          html
        }
      }
    }
  }
`;

export default FeaturedPost;

This snippet displays my index page code:

index.tsx

const IndexPage: React.FunctionComponent<P> = () => {
  return (
    <Layout>
      <SEO
        title="Home"
        keywords={[`gatsby`, `application`, `react`]}
        description="Index for something I can't remember?!"
      />
      <FeaturedPost />
      <h1>Hi people</h1>
      <p>Welcome to your new Gatsby site.</p>
      <p>Now go build something great.</p>
      <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }} />
    </Layout>
  );
};

export default IndexPage;

Tslint is currently expecting me to pass a prop named data to the FeaturedPost component due to the implementation of interface IProps, even though there is no actual data being passed.

The FeaturedPost component retrieves this data as a response from the query it sends. Any suggestions on what might be causing this issue or how I could address it to satisfy the linter?

javascript typescript gatsby contentful

Answer 1

Answer №1

If you are using Gatsby v2, be aware that graphql queries in non-page components will no longer work as expected. Instead, consider using StaticQuery as an alternative. Below is a simple example:

import * as React from 'react'
import { StaticQuery, graphql, Link } from 'gatsby'

type TOCDataType = {
  readonly allSitePage: {
    edges: [
      {
        node: {
          id: string
          path: string
        }
      }
    ]
  }
}

const TableOfContents: React.FunctionComponent<{}> = () => (
  <StaticQuery
    query={graphql`
      query SitePageQuery {
        allSitePage {
          edges {
            node {
              id
              path
            }
          }
        }
      }
    `}
    render={(data: TOCDataType) => (
      <div>
        {data.allSitePage.edges.map(({ node }) => (
          <li key={node.id}>
            <Link to={node.path}>{node.path}</Link>
          </li>
        ))}
      </div>
    )}
  />
)

export default TableOfContents

Answer 2

If you are using Gatsby v2, be aware that graphql queries in non-page components will no longer work as expected. Instead, consider using StaticQuery as an alternative. Below is a simple example:

import * as React from 'react'
import { StaticQuery, graphql, Link } from 'gatsby'

type TOCDataType = {
  readonly allSitePage: {
    edges: [
      {
        node: {
          id: string
          path: string
        }
      }
    ]
  }
}

const TableOfContents: React.FunctionComponent<{}> = () => (
  <StaticQuery
    query={graphql`
      query SitePageQuery {
        allSitePage {
          edges {
            node {
              id
              path
            }
          }
        }
      }
    `}
    render={(data: TOCDataType) => (
      <div>
        {data.allSitePage.edges.map(({ node }) => (
          <li key={node.id}>
            <Link to={node.path}>{node.path}</Link>
          </li>
        ))}
      </div>
    )}
  />
)

export default TableOfContents

Gatsby: Resolving the issue where tslint requires a component to receive props directly from the query within the component

Answer №1

Similar questions

Adding intricate SVG components onto a chosen group

Troubleshooting Compatibility Issues: JavaScript Function Works in Chrome but not in Internet

Tips for launching a new page with a button click in React.js without relying on Routers

How can I use JavaScript to consistently fetch the CSS-defined percentage setting for padding/margin instead of the pixel size?

What prevents me from initializing a blank Map or Set using Object.create?

Show a compact graphic in the upper-right-hand corner

What is the correct way to utilize the Vuex mutation payload object effectively?

How to Retrieve Values from Dynamic Arrays in JavaScript Without Specifying Keys

Ways to transform a React class-based component into a functional component

Disconnection between client and server communications

ERROR Error: Uncaught (in promise): ContradictionError: The variable this.products is being incorrectly identified as non-iterable, although it

Exploring the Use of a Spinner in Backbone.js: Best Practices and Timing

The Art of Div Switching: Unveiling the Strategies

Error encountered when attempting to retrieve token from firebase for messaging

What is the best way to simulate our services for controller testing?

Using Redis for pub/sub functionality within or outside of the io.connect callback

Troubleshooting Problems with Owl Carousel Loading

XState TypeScript - utilizing the Interprete Service

Retrieve mongodb objects that fall within a specified date range

I am perplexed by JQuery. It is returning true when comparing an input value from a number type input, and I cannot figure out the reason behind it