Create a rule to flag prop types consumed from .graphql files

We have this best practice documented here, https://github.com/Shopify/web-foundation/blob/master/handbook/Best practices/GraphQL/README.md#organizing-graphql-documents

We should make it harder to break this practice by introducing a lint rule

GraphQL files are the private responsibility of a single component. Components should not reach into another component to grab its GraphQL query for any reason. This is usually done to gain access to individual types from the query when declaring a subcomponent’s prop types. Instead of doing this, you should declare a “dumb” version of the types your component expects, and rely on TypeScript to verify that the parent is passing in the right data:

// bad
import {ComponentQueryData} from '../Parent/graphql/ComponentQuery.graphql';

interface Props {
  products: ComponentQueryData.ProductsEdgesNode[];
}

// good
interface Product {
  id: string;
  title: string;
}

interface Props {
  products: Product[];
}

[ismail-syed]

I would say it’s still relevant.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.