Update Codegen dependencies and make it stable (#1108)

* Update codegen dependencies

* Revert "Maybe fix not found queries issue from monorepo"

This reverts commit 8926b2e.

* Make codegen flags stable

* Make codegen command stable

* Workaround for latest codegen/cli bug

* Update hydrogen-react types to latest codegen/cli

* Fix removing unstable

* Update gql to latest versions

* Update generated SFAPI types to new ts plugin version

* Fix issue where gql documents were not found the first time the project runs

* Patch another gql package for a bug fix

* Fix cjs build

* Fix usage of scalars

* Fix codegen test

* Fix test by importing patch before code

* Ensure gql has the correct cwd in tests

* Simplify patching

* Make patch synchronous to support CJS

* Use stable --codegen flag in templates

* Fix tests again

* Remove warning

* Changesets

* Cleanup

* Cleanup

* Update version change

* Fix type

* Changesets

.changeset/fuzzy-singers-check.md

@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen-codegen': patch
+---
+
+Remove warning when this package is used without `@shopify/hydrogen`.

.changeset/orange-socks-shave.md

@@ -0,0 +1,5 @@
+---
+'@shopify/cli-hydrogen': minor
+---
+
+The Codegen feature is now considered stable and related dependencies have been updated. Use `--codegen` flag instead of `--codegen-unstable` to generate code from your GraphQL queries.

.changeset/pink-bottles-bow.md

@@ -0,0 +1,25 @@
+---
+'@shopify/hydrogen-codegen': minor
+---
+
+Removed the `patchGqlPluck` named export from the main entrypoint.
+
+Added `@shopify/hydrogen-codegen/patch` entrypoint that automatically patches the necessary files. This is applied automatically by Hydrogen CLI.
+If you're using the `graphql-codegen` CLI directly, you can either run it as a Node loader with `node -r @shopify/hydrogen-codegen/patch node_modules/.bin/graphql-codegen` or import it in your `codegen.ts` file before anything else:
+
+```js
+import '@shopify/hydrogen-codegen/patch';
+import {preset, schema, pluckConfig} from '@shopify/hydrogen-codegen';
+
+export default {
+  overwrite: true,
+  pluckConfig,
+  generates: {
+    'storefrontapi.generated.d.ts': {
+      preset,
+      schema,
+      documents: ['...'],
+    },
+  },
+};
+```

.changeset/tender-teachers-allow.md

@@ -0,0 +1,26 @@
+---
+'@shopify/hydrogen-react': patch
+'@shopify/hydrogen': patch
+---
+
+The Storefront API types included are now generated using `@graphql-codegen/typescript@4` ([changelog](https://github.com/dotansimha/graphql-code-generator/blob/master/packages/plugins/typescript/typescript/CHANGELOG.md#400)). This results in a breaking change if you were importing `Scalars` directly from `@shopify/hydrogen-react` or `@shopify/hydrogen`.
+
+Before:
+
+```tsx
+import type {Scalars} from '@shopify/hydrogen/storefront-api-types';
+
+type Props = {
+  id: Scalars['ID']; // This was a string
+};
+```
+
+After:
+
+```tsx
+import type {Scalars} from '@shopify/hydrogen/storefront-api-types';
+
+type Props = {
+  id: Scalars['ID']['input']; // Need to access 'input' or 'output' to get the string
+};
+```