feat(BUN-2338): installing graphql-codegen (#990)

* feat(BUN-2338): installing graphql-codegen

* feat(BUN-2338): env based type generation

apps/storefront/codegen.ts

@@ -0,0 +1,27 @@
+import type { CodegenConfig } from '@graphql-codegen/cli'
+
+const { CODEGEN_ENV } = process.env
+
+const envs: Record<string, { schema: string }> = {
+  local: {
+    schema: 'http://localhost:9000/graphql',
+  },
+  production: {
+    schema: 'https://api.bundleb2b.net/graphql',
+  },
+}
+
+const config: CodegenConfig = {
+  schema: !CODEGEN_ENV ? envs.production.schema : envs[CODEGEN_ENV].schema,
+  documents: ['src/shared/service/**/*.ts'],
+  generates: {
+    './src/types/gql/': {
+      preset: 'client',
+      presetConfig: {
+        gqlTagName: 'gql',
+      },
+    },
+  },
+  ignoreNoDocuments: true,
+}
+export default config

apps/storefront/package.json

@@ -11,6 +11,8 @@
     "preview": "vite preview",
     "test": "vitest",
     "coverage": "vitest --coverage",
+    "generate": "graphql-codegen",
+    "generate:local": "CODEGEN_ENV=local graphql-codegen",
     "start": "http-server ./dist --cors"
   },
   "dependencies": {
@@ -52,6 +54,8 @@
   },
   "devDependencies": {
     "@b3/tsconfig": "*",
+    "@graphql-codegen/cli": "^5.0.2",
+    "@graphql-codegen/client-preset": "^4.2.5",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.2.5",
     "@types/crypto-js": "^4.2.1",

apps/storefront/src/types/gql/fragment-masking.ts

@@ -0,0 +1,86 @@
+/* eslint-disable */
+import {
+  ResultOf,
+  DocumentTypeDecoration,
+  TypedDocumentNode,
+} from '@graphql-typed-document-node/core'
+import { FragmentDefinitionNode } from 'graphql'
+import { Incremental } from './graphql'
+
+export type FragmentType<
+  TDocumentType extends DocumentTypeDecoration<any, any>
+> = TDocumentType extends DocumentTypeDecoration<infer TType, any>
+  ? [TType] extends [{ ' $fragmentName'?: infer TKey }]
+    ? TKey extends string
+      ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+      : never
+    : never
+  : never
+
+// return non-nullable if `fragmentType` is non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>
+): TType
+// return nullable if `fragmentType` is nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType:
+    | FragmentType<DocumentTypeDecoration<TType, any>>
+    | null
+    | undefined
+): TType | null | undefined
+// return array of non-nullable if `fragmentType` is array of non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
+): ReadonlyArray<TType>
+// return array of nullable if `fragmentType` is array of nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType:
+    | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
+    | null
+    | undefined
+): ReadonlyArray<TType> | null | undefined
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType:
+    | FragmentType<DocumentTypeDecoration<TType, any>>
+    | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
+    | null
+    | undefined
+): TType | ReadonlyArray<TType> | null | undefined {
+  return fragmentType as any
+}
+
+export function makeFragmentData<
+  F extends DocumentTypeDecoration<any, any>,
+  FT extends ResultOf<F>
+>(data: FT, _fragment: F): FragmentType<F> {
+  return data as FragmentType<F>
+}
+export function isFragmentReady<TQuery, TFrag>(
+  queryNode: DocumentTypeDecoration<TQuery, any>,
+  fragmentNode: TypedDocumentNode<TFrag>,
+  data:
+    | FragmentType<TypedDocumentNode<Incremental<TFrag>, any>>
+    | null
+    | undefined
+): data is FragmentType<typeof fragmentNode> {
+  const deferredFields = (
+    queryNode as {
+      __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> }
+    }
+  ).__meta__?.deferredFields
+
+  if (!deferredFields) return true
+
+  const fragDef = fragmentNode.definitions[0] as
+    | FragmentDefinitionNode
+    | undefined
+  const fragName = fragDef?.name?.value
+
+  const fields = (fragName && deferredFields[fragName]) || []
+  return fields.length > 0 && fields.every((field) => data && field in data)
+}

apps/storefront/src/types/gql/gql.ts

@@ -0,0 +1,25 @@
+/* eslint-disable */
+import * as types from './graphql'
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core'
+
+const documents = []
+/**
+ * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ *
+ *
+ * @example
+ * ```ts
+ * const query = gql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
+ * ```
+ *
+ * The query argument is unknown!
+ * Please regenerate the types.
+ */
+export function gql(source: string): unknown
+
+export function gql(source: string) {
+  return (documents as any)[source] ?? {}
+}
+
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> =
+  TDocumentNode extends DocumentNode<infer TType, any> ? TType : never