feat: generate TS types from Storefront GraphQL

[NWRichmond]

Why are these changes introduced?

Addresses ENG-8184

Configure GraphQL codegen

What is this pull request doing?

This PR configures GraphQL Code Generator to generate the following TS types:

• All types available in the Nacelle Storefront API
• Types for the Nacelle Storefront API results of GraphQL fragments and queries in packages/storefront-sdk/src/graphql

Discussion

There are some noteworthy aspects to the changes introduced by this PR:

Node.js x ESM x TS

In keeping with GraphQL Codegen's documentation for TypeScript x ESM, the TypeScript moduleResolution and module config have been updated to "Node16". This change, coupled with the fact that this package uses "type": "module" requires us to handle imports a bit differently than we're used to. Instead of:

import { thing } from '../someFile';

, we must instead import using a .js extension:

import { thing } from '../someFile.js';

You can learn more about why this is in the TypeScript 4.7 Release Notes.

The two consequences of this change are:

1. We need to get used to importing with the .js extension.
2. The ESLint config has been updated with the requisite extensionAlias settings.

For some lively reading on why we can't use a .ts extension instead of a .js extension for ESM imports, see microsoft/TypeScript#49083.

The graphql dependency

graphql has been installed as a dependency. This is probably fine, but it's worth contemplating whether this could lead to multiple versions of graphql being installed in a user's project, which can cause some tricky issues. I'm not sure how likely that would be. But if we can identify specific cases where it would be a problem, one potential solution would be to reinstall graphql as a devDep, and also include it in peerDependencies.

How to Test

1. Check out the ENG-8184-configure-graphql-codegen branch.
2. npm run bootstrap from the monorepo root, or npm i from packages/storefront-sdk.
3. Navigate to packages/storefront-sdk.
4. npm run build - the package should build without errors.
5. npm run codegen - the codegen steps should finish without errors, and there should be no uncommitted changes to src/types/storefront.ts.

[changeset-bot]

🦋 Changeset detected

Latest commit: 95c4902

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
nacelle-gatsby-reference-store	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Dec 28, 2022 at 9:55PM (UTC)
nacelle-gatsby-starter	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Dec 28, 2022 at 9:55PM (UTC)
nacelle-next-reference-store	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Dec 28, 2022 at 9:55PM (UTC)
nacelle-next-starter	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Dec 28, 2022 at 9:55PM (UTC)
nacelle-nuxt-reference-store	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Dec 28, 2022 at 9:55PM (UTC)
nacelle-nuxt-starter	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Dec 28, 2022 at 9:55PM (UTC)

[NWRichmond]

You might be wondering why we're using codegen.yml instead of codegen.ts. Although the GraphQL Code Generator docs suggest that using codgen.ts in an ESM project should work, there is a bug that's getting in the way: https://github.com/dotansimha/graphql-code-generator/issues/8488.

[KrisQ]

Looks good!

[mdarrik]

LGTM! Even after deleting src/types/storefront.ts and re-running it, there are no changes to be committed.