Shopify analytics

.changeset/plenty-moles-listen.md

@@ -0,0 +1,30 @@
+---
+'@shopify/storefront-kit-react': patch
+---
+
+Shopify Analytics
+
+Methods:
+
+- `useShopifyCookies(hasUserConsent = true, domain = ''): void` - sets and refreshes Shopify cookies
+- `getShopifyCookie(cookieString: string): ShopifyCookie` - returns Shopify cookies
+- `sendShopifyAnalytics({eventName: AnalyticsEventName, payload: ShopifyAnalytics}, domain?): Promise<void>` - sends Shopify analytics
+- `getClientBrowserParameters(): ClientBrowserParameters` - returns commonly tracked client browser values
+
+Constants:
+
+- `AnalyticsEventName` - list of Shopify accepted analytics events
+- `AnalyticsPageType` - list of Shopify accepted page type names
+- `ShopifyAppSource` - list of Shopify accepted application source
+
+Types:
+
+- `ShopifyCookies`
+- `ClientBrowserParameters`
+- `ShopifyAnalytics` - generic type for `ShopifyPageView` and `ShopifyAddToCart`
+- `ShopifyAnalyticsPayload` - generic type for `ShopifyPageViewPayload` and `ShopifyAddToCartPayload`
+- `ShopifyPageView`
+- `ShopifyPageViewPayload`
+- `ShopifyAddToCart`
+- `ShopifyAddToCartPayload`
+- `ShopifyAnalyticsProduct`

apps/nextjs/gql/fragment-masking.ts

@@ -1,4 +1,4 @@
-import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+import { TypedDocumentNode as DocumentNode, ResultOf } from '@graphql-typed-document-node/core';
 
 
 export type FragmentType<TDocumentType extends DocumentNode<any, any>> = TDocumentType extends DocumentNode<
@@ -38,3 +38,11 @@ export function useFragment<TType>(
 ): TType | ReadonlyArray<TType> | null | undefined {
   return fragmentType as any
 }
+
+
+export function makeFragmentData<
+  F extends DocumentNode,
+  FT extends ResultOf<F>
+>(data: FT, _fragment: F): FragmentType<F> {
+  return data as FragmentType<F>;
+}

apps/nextjs/gql/gql.ts

@@ -2,13 +2,54 @@
 import * as types from './graphql';
 import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 
+/**
+ * Map of all GraphQL operations in the project.
+ *
+ * This map has several performance disadvantages:
+ * 1. It is not tree-shakeable, so it will include all operations in the project.
+ * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
+ * 3. It does not support dead code elimination, so it will add unused operations.
+ *
+ * Therefore it is highly recommended to use the babel-plugin for production.
+ */
 const documents = {
+    "\n  query Collection($handle: String!) {\n    collection(handle: $handle) {\n      id\n      handle\n      title\n      description\n    }\n  }\n": types.CollectionDocument,
     "\n  query IndexQuery {\n    shop {\n      name\n    }\n    products(first: 1) {\n      nodes {\n        # if you uncomment 'blah', it should have a GraphQL validation error in your IDE if you have a GraphQL plugin. It should also give an error during 'npm run dev'\n        # blah\n        id\n        title\n        publishedAt\n        handle\n        variants(first: 1) {\n          nodes {\n            id\n            image {\n              url\n              altText\n              width\n              height\n            }\n          }\n        }\n      }\n    }\n  }\n": types.IndexQueryDocument,
+    "\n  query Product {\n    shop {\n      name\n    }\n    products(first: 1) {\n      nodes {\n        # if you uncomment 'blah', it should have a GraphQL validation error in your IDE if you have a GraphQL plugin. It should also give an error during 'npm run dev'\n        # blah\n        id\n        title\n        vendor\n        publishedAt\n        handle\n        variants(first: 1) {\n          nodes {\n            id\n            title\n            price {\n              amount\n            }\n            image {\n              url\n              altText\n              width\n              height\n            }\n          }\n        }\n      }\n    }\n  }\n": types.ProductDocument,
+    "\n  query Search($searchTerm: String) {\n    products(first: 1, sortKey: RELEVANCE, query: $searchTerm) {\n      pageInfo {\n        startCursor\n        endCursor\n        hasNextPage\n        hasPreviousPage\n      }\n    }\n  }\n": types.SearchDocument,
 };
 
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query Collection($handle: String!) {\n    collection(handle: $handle) {\n      id\n      handle\n      title\n      description\n    }\n  }\n"): (typeof documents)["\n  query Collection($handle: String!) {\n    collection(handle: $handle) {\n      id\n      handle\n      title\n      description\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(source: "\n  query IndexQuery {\n    shop {\n      name\n    }\n    products(first: 1) {\n      nodes {\n        # if you uncomment 'blah', it should have a GraphQL validation error in your IDE if you have a GraphQL plugin. It should also give an error during 'npm run dev'\n        # blah\n        id\n        title\n        publishedAt\n        handle\n        variants(first: 1) {\n          nodes {\n            id\n            image {\n              url\n              altText\n              width\n              height\n            }\n          }\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query IndexQuery {\n    shop {\n      name\n    }\n    products(first: 1) {\n      nodes {\n        # if you uncomment 'blah', it should have a GraphQL validation error in your IDE if you have a GraphQL plugin. It should also give an error during 'npm run dev'\n        # blah\n        id\n        title\n        publishedAt\n        handle\n        variants(first: 1) {\n          nodes {\n            id\n            image {\n              url\n              altText\n              width\n              height\n            }\n          }\n        }\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query Product {\n    shop {\n      name\n    }\n    products(first: 1) {\n      nodes {\n        # if you uncomment 'blah', it should have a GraphQL validation error in your IDE if you have a GraphQL plugin. It should also give an error during 'npm run dev'\n        # blah\n        id\n        title\n        vendor\n        publishedAt\n        handle\n        variants(first: 1) {\n          nodes {\n            id\n            title\n            price {\n              amount\n            }\n            image {\n              url\n              altText\n              width\n              height\n            }\n          }\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query Product {\n    shop {\n      name\n    }\n    products(first: 1) {\n      nodes {\n        # if you uncomment 'blah', it should have a GraphQL validation error in your IDE if you have a GraphQL plugin. It should also give an error during 'npm run dev'\n        # blah\n        id\n        title\n        vendor\n        publishedAt\n        handle\n        variants(first: 1) {\n          nodes {\n            id\n            title\n            price {\n              amount\n            }\n            image {\n              url\n              altText\n              width\n              height\n            }\n          }\n        }\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query Search($searchTerm: String) {\n    products(first: 1, sortKey: RELEVANCE, query: $searchTerm) {\n      pageInfo {\n        startCursor\n        endCursor\n        hasNextPage\n        hasPreviousPage\n      }\n    }\n  }\n"): (typeof documents)["\n  query Search($searchTerm: String) {\n    products(first: 1, sortKey: RELEVANCE, query: $searchTerm) {\n      pageInfo {\n        startCursor\n        endCursor\n        hasNextPage\n        hasPreviousPage\n      }\n    }\n  }\n"];
 
+/**
+ * The graphql 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 graphql(source: string): unknown;
+
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};
 }