0

I use Typescript to define and type my props. I am using ESLint and eslint-config-airbnb-typescript.

I use gatsby-plugin-graphql-codegen to generate the types for my graphQL queries.

ESLint is complaining about props validation.

This is the React/Gatsby corresponding index.tsx file:

import React from 'react';
import { PageProps, Link, graphql } from 'gatsby';

import Layout from 'components/layout';
import Image from 'components/image';
import SEO from 'components/seo';

import { ProductsQuery } from '../../graphql-types';

    const IndexPage: React.FC<PageProps<ProductsQuery>> = ({ data: { products } }) => (
      <Layout>
        <SEO title="Home" />
        <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` }}>
          <Image />
        </div>
        <Link to="/page-2/">Go to page 2</Link> <br />
        <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
        <ul>
          {products.nodes.map((product) => (
            <li key={product.id}>
              <h3>{product.name}</h3>
            </li>
          ))}
        </ul>
      </Layout>
    );
    
    export const pageQuery = graphql`
      query Products {
        products: allGraphCmsProduct {
          nodes {
            id
            name
          }
        }
      }
    `;
    
    export default IndexPage;

If I add 'react/prop-types': 'off' to ESLint rules it's ok. Is that the correct method? Since I define my types using Typescript I don't need React prop-types, but why do I get this error, I thought eslint-config-airbnb-typescript would handle this?

meez
  • 3,783
  • 5
  • 37
  • 91
  • Can you add the code that's generating the ESlint error? It's possible that your props are being typed incorrectly with TypeScript. – juliomalves Jan 02 '21 at 16:51
  • 1
    If you are using TypeScript, you can disable `react/prop-types` if you don't need the runtime prop type validation it gives you. – AKX Jan 02 '21 at 20:07

0 Answers0