#3 wip

.vscode/settings.json

@@ -48,5 +48,10 @@
 	"tailwindCSS.experimental.classRegex": [
 		["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
 		["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
-	]
+	],
+
+	// Typescript settings
+	// https://gql-tada.0no.co/get-started/installation#vscode-setup
+	"typescript.tsdk": "node_modules/typescript/lib",
+  	"typescript.enablePromptUseWorkspaceTsdk": true
 }

apps/sfy-chrome-extension/package.json

@@ -20,7 +20,7 @@
 	"dependencies": {
 		"@blgc/utils": "^0.0.18",
 		"@repo/ui": "workspace:*",
-		"feature-fetch": "^0.0.22",
+		"feature-fetch": "^0.0.25",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1"
 	},

apps/sfy-eu-blocks-app/admin-block-extension/package.json

@@ -15,7 +15,7 @@
 		"@shopify/ui-extensions": "2024.7.0",
 		"@shopify/ui-extensions-react": "2024.7.0",
 		"eprel-client": "^0.0.16",
-		"feature-fetch": "^0.0.22",
+		"feature-fetch": "^0.0.25",
 		"feature-form": "^0.0.27",
 		"feature-react": "^0.0.23",
 		"react": "^18.3.1",

apps/sfy-eu-blocks-app/admin-block-extension/src/environment/config/core-api.config.ts

@@ -1,3 +1,3 @@
 export const coreApiConfig = {
-	baseUrl: 'https://vip-entering-depot-colorado.trycloudflare.com' // TODO: Find way to sync url from api-core-node
+	baseUrl: 'https://miracle-translate-contributor-cartridge.trycloudflare.com' // TODO: Find way to sync url from api-core-node
 };

apps/sfy-eu-blocks-app/admin-block-extension/src/environment/extension/query.ts

@@ -1,12 +1,20 @@
-import { Err, FetchError, Ok, TResult } from 'feature-fetch';
+import { Err, FetchError, getQueryString, Ok, TDocumentInput, TResult } from 'feature-fetch';
 
 import { cx } from './context';
 
 export async function q<
-	GVariables extends Record<string, any>,
-	GSucessResponseData extends Record<string, any>
->(query: string, variables: GVariables): Promise<TResult<GSucessResponseData, FetchError>> {
-	const result = await cx().query<GSucessResponseData, GVariables>(query, {
+	GSucessResponseData extends Record<string, any>,
+	GVariables extends Record<string, any>
+>(
+	query: TDocumentInput<GSucessResponseData, GVariables>,
+	variables: GVariables
+): Promise<TResult<GSucessResponseData, FetchError>> {
+	const maybeQueryString = getQueryString(query);
+	if (maybeQueryString.isErr()) {
+		return Err(maybeQueryString.error);
+	}
+
+	const result = await cx().query<GSucessResponseData, GVariables>(maybeQueryString.value, {
 		variables
 	});
 

apps/sfy-eu-blocks-app/app/shopify.app.toml

@@ -8,7 +8,7 @@ extension_directories = [
 ]
 name = "eu-blocks"
 handle = "eu-blocks"
-application_url = "https://indices-gadgets-seniors-app.trycloudflare.com"
+application_url = "https://canon-formed-betting-employees.trycloudflare.com"
 embedded = true
 
 [build]
@@ -22,9 +22,9 @@ scopes = "read_files,read_locales,read_products,read_themes,write_files,write_pr
 
 [auth]
 redirect_urls = [
-  "https://indices-gadgets-seniors-app.trycloudflare.com/auth/callback",
-  "https://indices-gadgets-seniors-app.trycloudflare.com/auth/shopify/callback",
-  "https://indices-gadgets-seniors-app.trycloudflare.com/api/auth/callback"
+  "https://canon-formed-betting-employees.trycloudflare.com/auth/callback",
+  "https://canon-formed-betting-employees.trycloudflare.com/auth/shopify/callback",
+  "https://canon-formed-betting-employees.trycloudflare.com/api/auth/callback"
 ]
 
 [webhooks]

apps/sfy-eu-blocks-app/checkout-ui-extension/package.json

@@ -14,7 +14,7 @@
 		"@shopify/ui-extensions": "2024.7.0",
 		"@shopify/ui-extensions-react": "2024.7.0",
 		"eprel-client": "^0.0.16",
-		"feature-fetch": "^0.0.22",
+		"feature-fetch": "^0.0.25",
 		"feature-react": "^0.0.23",
 		"feature-state": "^0.0.23",
 		"react": "^18.3.1"

apps/sfy-eu-blocks-app/checkout-ui-extension/src/environment/config/core-api.config.ts

@@ -1,3 +1,3 @@
 export const coreApiConfig = {
-	baseUrl: 'https://vip-entering-depot-colorado.trycloudflare.com' // TODO: Find way to sync url from api-core-node
+	baseUrl: 'https://miracle-translate-contributor-cartridge.trycloudflare.com' // TODO: Find way to sync url from api-core-node
 };

apps/sfy-eu-blocks-app/checkout-ui-extension/src/extensions/CheckoutCartLineItem/environment/extension/query.ts

@@ -1,12 +1,20 @@
-import { Err, FetchError, Ok, TResult } from 'feature-fetch';
+import { Err, FetchError, getQueryString, Ok, TDocumentInput, TResult } from 'feature-fetch';
 
 import { cx } from './context';
 
 export async function q<
-	GVariables extends Record<string, any>,
-	GSucessResponseData extends Record<string, any>
->(query: string, variables: GVariables): Promise<TResult<GSucessResponseData, FetchError>> {
-	const result = await cx().query<GSucessResponseData, GVariables>(query, {
+	GSucessResponseData extends Record<string, any>,
+	GVariables extends Record<string, any>
+>(
+	query: TDocumentInput<GSucessResponseData, GVariables>,
+	variables: GVariables
+): Promise<TResult<GSucessResponseData, FetchError>> {
+	const maybeQueryString = getQueryString(query);
+	if (maybeQueryString.isErr()) {
+		return Err(maybeQueryString.error);
+	}
+
+	const result = await cx().query<GSucessResponseData, GVariables>(maybeQueryString.value, {
 		variables
 	});
 

apps/sfy-eu-blocks-app/checkout-ui-extension/src/extensions/OrderSummaryCartLineItem/environment/extension/query.ts

@@ -1,12 +1,20 @@
-import { Err, FetchError, Ok, TResult } from 'feature-fetch';
+import { Err, FetchError, getQueryString, Ok, TDocumentInput, TResult } from 'feature-fetch';
 
 import { cx } from './context';
 
 export async function q<
-	GVariables extends Record<string, any>,
-	GSucessResponseData extends Record<string, any>
->(query: string, variables: GVariables): Promise<TResult<GSucessResponseData, FetchError>> {
-	const result = await cx().query<GSucessResponseData, GVariables>(query, {
+	GSucessResponseData extends Record<string, any>,
+	GVariables extends Record<string, any>
+>(
+	query: TDocumentInput<GSucessResponseData, GVariables>,
+	variables: GVariables
+): Promise<TResult<GSucessResponseData, FetchError>> {
+	const maybeQueryString = getQueryString(query);
+	if (maybeQueryString.isErr()) {
+		return Err(maybeQueryString.error);
+	}
+
+	const result = await cx().query<GSucessResponseData, GVariables>(maybeQueryString.value, {
 		variables
 	});
 

apps/sfy-eu-blocks-app/checkout-ui-extension/src/extensions/ThankYouCartLineItem/environment/extension/query.ts

@@ -1,12 +1,20 @@
-import { Err, FetchError, Ok, TResult } from 'feature-fetch';
+import { Err, FetchError, getQueryString, Ok, TDocumentInput, TResult } from 'feature-fetch';
 
 import { cx } from './context';
 
 export async function q<
-	GVariables extends Record<string, any>,
-	GSucessResponseData extends Record<string, any>
->(query: string, variables: GVariables): Promise<TResult<GSucessResponseData, FetchError>> {
-	const result = await cx().query<GSucessResponseData, GVariables>(query, {
+	GSucessResponseData extends Record<string, any>,
+	GVariables extends Record<string, any>
+>(
+	query: TDocumentInput<GSucessResponseData, GVariables>,
+	variables: GVariables
+): Promise<TResult<GSucessResponseData, FetchError>> {
+	const maybeQueryString = getQueryString(query);
+	if (maybeQueryString.isErr()) {
+		return Err(maybeQueryString.error);
+	}
+
+	const result = await cx().query<GSucessResponseData, GVariables>(maybeQueryString.value, {
 		variables
 	});
 

packages/api-core-client/package.json

@@ -27,7 +27,7 @@
 	},
 	"homepage": "",
 	"dependencies": {
-		"feature-fetch": "^0.0.22"
+		"feature-fetch": "^0.0.25"
 	},
 	"devDependencies": {
 		"@blgc/config": "^0.0.23",

packages/sfy-app-session-storage-api/package.json

@@ -27,7 +27,7 @@
 	},
 	"homepage": "",
 	"dependencies": {
-		"feature-fetch": "^0.0.22"
+		"feature-fetch": "^0.0.25"
 	},
 	"peerDependencies": {
 		"@shopify/shopify-api": "^11.0.0",

packages/sfy-utils/.gitignore

@@ -0,0 +1 @@
+graphql-env.d.ts

packages/sfy-utils/package.json

@@ -29,7 +29,8 @@
 	"dependencies": {
 		"@shopify/liquid-html-parser": "^2.0.3",
 		"@shopify/prettier-plugin-liquid": "^1.5.0",
-		"feature-fetch": "^0.0.22",
+		"feature-fetch": "^0.0.25",
+		"gql.tada": "^1.8.7",
 		"prettier": "^3.3.3"
 	},
 	"devDependencies": {

packages/sfy-utils/src/graphql/mutations/create-file.mutation.ts

@@ -6,7 +6,7 @@ export async function createFileMutation(
 	variables: TCreateFileMutationVariables,
 	query: TQuery
 ): Promise<TResult<TCreateFileMutationResponseData, FetchError>> {
-	return query<TCreateFileMutationVariables, TCreateFileMutationResponseData>(
+	return query<TCreateFileMutationResponseData, TCreateFileMutationVariables>(
 		gql`
 			mutation CreateFile($files: [FileCreateInput!]!) {
 				fileCreate(files: $files) {

packages/sfy-utils/src/graphql/mutations/delete-metafield.mutation.ts

@@ -6,7 +6,7 @@ export async function deleteMetafieldMutation(
 	variables: TDeleteMetafieldMutationVariables,
 	query: TQuery
 ): Promise<TResult<TDeleteMetafieldMutationResponseData, FetchError>> {
-	return query<TDeleteMetafieldMutationVariables, TDeleteMetafieldMutationResponseData>(
+	return query<TDeleteMetafieldMutationResponseData, TDeleteMetafieldMutationVariables>(
 		gql`
 			mutation DeleteMetafield($productId: ID!, $namespace: String!, $key: String!) {
 				metafieldsDelete(metafields: [{ ownerId: $productId, namespace: $namespace, key: $key }]) {

packages/sfy-utils/src/graphql/mutations/update-metafield.mutation.ts

@@ -6,7 +6,7 @@ export async function updateMetafieldMutation(
 	variables: TUpdateMetafieldVariables,
 	query: TQuery
 ): Promise<TResult<TUpdateMetafieldResponseData, FetchError>> {
-	return query<TUpdateMetafieldVariables, TUpdateMetafieldResponseData>(
+	return query<TUpdateMetafieldResponseData, TUpdateMetafieldVariables>(
 		gql`
 			mutation UpdateMetafield(
 				$productId: ID!

packages/sfy-utils/src/graphql/queries/get-generic-file-urls.query.ts

@@ -6,7 +6,7 @@ export async function getGenericFileUrlsQuery(
 	variables: TGetFileUrlsQueryVariables,
 	query: TQuery
 ): Promise<TResult<TGetFileUrlsQueryResponseData, FetchError>> {
-	return query<TGetFileUrlsQueryVariables, TGetFileUrlsQueryResponseData>(
+	return query<TGetFileUrlsQueryResponseData, TGetFileUrlsQueryVariables>(
 		gql`
 			query GetGenericFileUrls($ids: [ID!]!) {
 				nodes(ids: $ids) {

packages/sfy-utils/src/graphql/queries/get-metafield-value.query.ts

@@ -6,7 +6,7 @@ export function getMetafieldValueQuery(
 	variables: TGetMetafieldValueQueryVariables,
 	query: TQuery
 ): Promise<TResult<TGetMetafieldValueQueryResponseData, FetchError>> {
-	return query<TGetMetafieldValueQueryVariables, TGetMetafieldValueQueryResponseData>(
+	return query<TGetMetafieldValueQueryResponseData, TGetMetafieldValueQueryVariables>(
 		gql`
 			query GetMetafieldValue($productId: ID!, $namespace: String!, $key: String!) {
 				product(id: $productId) {

packages/sfy-utils/src/graphql/queries/get-metafield.query.ts

@@ -7,7 +7,7 @@ export function getMetafieldQuery<GKeys extends keyof TMetafieldProps>(
 	metafieldKeys: GKeys[],
 	query: TQuery
 ): Promise<TResult<TGetMetafieldQueryResponseData<GKeys>, FetchError>> {
-	return query<TGetMetafieldQueryVariables, TGetMetafieldQueryResponseData<GKeys>>(
+	return query<TGetMetafieldQueryResponseData<GKeys>, TGetMetafieldQueryVariables>(
 		gql`
 			query GetMetafield($productId: ID!, $namespace: String!, $key: String!) {
 				product(id: $productId) {

packages/sfy-utils/src/graphql/queries/get-shop-locales.query.ts

@@ -5,7 +5,7 @@ import { type TQuery } from '../types';
 export async function getShopLocalesQuery(
 	query: TQuery
 ): Promise<TResult<TGetShopLocalesQueryResponseData, FetchError>> {
-	return query<{}, TGetShopLocalesQueryResponseData>(
+	return query<TGetShopLocalesQueryResponseData, {}>(
 		gql`
 			query GetShopLocales {
 				shopLocales {

packages/sfy-utils/src/graphql/queries/get-theme-file.query.ts

@@ -6,7 +6,7 @@ export function getThemeFileQuery(
 	variables: TGetThemeFileQueryVariables,
 	query: TQuery
 ): Promise<TResult<TGetThemeFileQueryResponseData, FetchError>> {
-	return query<TGetThemeFileQueryVariables, TGetThemeFileQueryResponseData>(
+	return query<TGetThemeFileQueryResponseData, TGetThemeFileQueryVariables>(
 		gql`
 			query GetThemeFile($themeId: ID!, $filename: String!) {
 				theme(id: $themeId) {

packages/sfy-utils/src/graphql/types.ts

@@ -1,9 +1,9 @@
-import { type FetchError, type TResult } from 'feature-fetch';
+import { type FetchError, type TDocumentInput, type TResult } from 'feature-fetch';
 
 export type TQuery = <
-	GVariables extends Record<string, any>,
-	GSucessResponseData extends Record<string, any>
+	GSucessResponseData extends Record<string, any>,
+	GVariables extends Record<string, any>
 >(
-	query: string,
+	query: TDocumentInput<GSucessResponseData, GVariables> | string,
 	variables: GVariables
 ) => Promise<TResult<GSucessResponseData, FetchError>>;

packages/sfy-utils/tsconfig.json

@@ -4,7 +4,12 @@
 		"outDir": "./dist",
 		"rootDir": "./src",
 		"declarationDir": "./dist/types",
-		"baseUrl": "."
+		"baseUrl": ".",
+		"plugins": [{
+			"name": "gql.tada/ts-plugin",
+			"schema": "https://shopify.dev/admin-graphql-direct-proxy/2024-07",
+			"tadaOutputLocation": "./src/graphql-env.d.ts",
+		  }]
 	},
 	"include": ["src"]
 }