@stephenchenorg/astro-graphql 9.0.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+# The MIT License (MIT)
+
+Copyright (c) 2025-present Lucas Yang <yangchenshin77@gmail.com>
+
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.

package/README.md

@@ -0,0 +1,42 @@
+# Stephenchenorg Astro 前端 GraphQL 整合串接套件
+
+[![NPM version][ico-version]][link-npm]
+[![Software License][ico-license]](LICENSE)
+[![Total Downloads][ico-downloads]][link-downloads]
+
+## 安裝
+
+```bash
+# npm
+npm install @stephenchenorg/astro-graphql
+# yarn
+yarn add @stephenchenorg/astro-graphql
+```
+
+## 文件
+
+https://stephenchenorg-astro.netlify.app
+
+## 開發
+
+```bash
+yarn
+yarn build
+```
+
+## 發布套件
+
+```bash
+npm login
+npm run release
+```
+
+## License
+
+[MIT LICENSE](LICENSE.md)
+
+[ico-version]: https://img.shields.io/npm/v/@stephenchenorg/astro-graphql?style=flat-square
+[ico-license]: https://img.shields.io/badge/license-MIT-brightgreen?style=flat-square
+[ico-downloads]: https://img.shields.io/npm/dt/@stephenchenorg/astro-graphql?style=flat-square
+[link-npm]: https://www.npmjs.com/package/@stephenchenorg/astro-graphql
+[link-downloads]: https://www.npmjs.com/package/@stephenchenorg/astro-graphql

package/dist/api/index.d.ts

@@ -0,0 +1,76 @@
+import { gql } from "graphql-tag";
+import { TypedDocumentNode } from "@graphql-typed-document-node/core";
+import { APIContext } from "astro";
+
+//#region src/api/error.d.ts
+interface GraphQLFieldError {
+  code?: number;
+  message: string;
+  locations?: {
+    line: number;
+    column: number;
+  }[];
+  path?: (string | number)[];
+  extensions?: GraphQLRequestExtensions;
+  data?: Record<string, any>;
+}
+interface GraphQLRequestExtensions {
+  debugMessage?: string;
+  file?: string;
+  line?: number;
+  trace?: {
+    file: string;
+    line: number;
+    call: number;
+  }[];
+}
+interface GraphQLRequestErrorOptions {
+  code?: number;
+  message: string;
+  query: string;
+  variables?: Record<string, any>;
+  extensions?: GraphQLRequestExtensions;
+  fieldErrors?: GraphQLFieldError[];
+}
+declare class GraphQLRequestError extends Error {
+  type: string;
+  name: string;
+  title: string;
+  code: number | undefined;
+  originalMessage: string;
+  query: string;
+  variables: Record<string, any> | undefined;
+  extensions: GraphQLRequestExtensions | undefined;
+  fieldErrors: GraphQLFieldError[] | undefined;
+  constructor(props: GraphQLRequestErrorOptions, options?: ErrorOptions);
+  isNotFound(): boolean;
+  private buildMessage;
+  static is(err: unknown): err is GraphQLRequestError;
+}
+declare class GraphQLNotFoundError extends GraphQLRequestError {
+  type: string;
+  name: string;
+}
+declare class GraphQLValidationError extends GraphQLRequestError {
+  type: string;
+  name: string;
+  errors: Record<string, string[]>;
+  constructor(props: GraphQLRequestErrorOptions, options?: ErrorOptions);
+}
+//#endregion
+//#region src/api/errorResponse.d.ts
+declare function handleErrorResponse(e: unknown): Response | undefined;
+//#endregion
+//#region src/api/fetch.d.ts
+interface CreateGraphQLAPIOptions {
+  endpoint: string;
+  defaultVariables?: Record<string, any> | ((astroContext?: APIContext) => Record<string, any>);
+  fetchOptions?: RequestInit | ((astroContext?: APIContext) => RequestInit);
+}
+declare function createGraphQLAPI(globalOptions: CreateGraphQLAPIOptions): <TData extends Record<string, any>, TVariables extends Record<string, any> = Record<string, any>>(query: TypedDocumentNode<TData, TVariables>, options?: {
+  variables?: TVariables;
+  fetchOptions?: RequestInit;
+  Astro?: APIContext;
+}) => Promise<TData>;
+//#endregion
+export { CreateGraphQLAPIOptions, GraphQLFieldError, GraphQLNotFoundError, GraphQLRequestError, GraphQLRequestErrorOptions, GraphQLRequestExtensions, GraphQLValidationError, createGraphQLAPI, gql, handleErrorResponse };

package/dist/api/index.js

@@ -0,0 +1,139 @@
+import { AwesomeGraphQLClient, GraphQLRequestError as GraphQLRequestError$1 } from "awesome-graphql-client";
+import { print } from "graphql/language/printer";
+import { gql } from "graphql-tag";
+
+//#region src/api/error.ts
+var GraphQLRequestError = class extends Error {
+	type = "GraphQLRequestError";
+	name = "GraphQLRequestError";
+	title = "GraphQL request error.";
+	code;
+	originalMessage;
+	query;
+	variables;
+	extensions;
+	fieldErrors;
+	constructor(props, options) {
+		const { code, message, query, variables, extensions, fieldErrors } = props;
+		super("GraphQL request error.", options);
+		const originalStack = this.stack;
+		this.title = "GraphQL request error.";
+		this.code = code;
+		this.originalMessage = message;
+		this.query = query;
+		this.variables = variables;
+		this.extensions = extensions;
+		this.fieldErrors = fieldErrors;
+		this.message = this.buildMessage();
+		this.stack = originalStack;
+	}
+	isNotFound() {
+		return this.originalMessage.includes("Http Status 404");
+	}
+	buildMessage() {
+		let message = `${this.originalMessage}\n`;
+		if (this.code) {
+			message += "\n";
+			message += `[code]\n${this.code}\n`;
+		}
+		if (this.extensions) {
+			if (this.extensions.debugMessage) {
+				message += "\n";
+				message += `${this.extensions.debugMessage}\n`;
+			}
+			if (this.extensions.file || this.extensions.line || this.extensions.trace) {
+				message += "\n";
+				message += "[stacktrace]\n";
+				if (this.extensions.file) message += `file: ${this.extensions.file}\n`;
+				if (this.extensions.line) message += `line: ${this.extensions.line}\n`;
+				if (this.extensions.trace && Array.isArray(this.extensions.trace)) {
+					message += "trace:\n";
+					for (const trace of this.extensions.trace.slice(0, 3)) {
+						message += `  - file: ${trace.file}\n`;
+						message += `    line: ${trace.line}\n`;
+						message += `    call: ${trace.call}\n`;
+					}
+				}
+			}
+		}
+		if (this.query) {
+			message += "\n";
+			message += `[query]\n${this.query}\n`;
+		}
+		if (this.variables) {
+			message += "\n";
+			message += `[variables]\n${JSON.stringify(this.variables, null, 2)}\n`;
+		}
+		return message;
+	}
+	static is(err) {
+		return err.type === "GraphQLRequestError";
+	}
+};
+var GraphQLNotFoundError = class extends GraphQLRequestError {
+	type = "GraphQLNotFoundError";
+	name = "GraphQLNotFoundError";
+};
+var GraphQLValidationError = class extends GraphQLRequestError {
+	type = "GraphQLValidationError";
+	name = "GraphQLValidationError";
+	errors;
+	constructor(props, options) {
+		super(props, options);
+		this.errors = this.fieldErrors?.[0]?.data?.validation || {};
+	}
+};
+
+//#endregion
+//#region src/api/errorResponse.ts
+function handleErrorResponse(e) {
+	if (e instanceof GraphQLNotFoundError) return new Response(null, {
+		status: 404,
+		statusText: "Not found"
+	});
+}
+
+//#endregion
+//#region src/api/fetch.ts
+function createGraphQLAPI(globalOptions) {
+	const client = new AwesomeGraphQLClient({
+		endpoint: globalOptions.endpoint,
+		formatQuery: (query) => print(query)
+	});
+	return function graphQLAPI(query, options) {
+		const { variables, fetchOptions, Astro: astroContext } = options || {};
+		const defaultVariables = typeof globalOptions.defaultVariables === "function" ? globalOptions.defaultVariables(astroContext) : globalOptions.defaultVariables;
+		const defaultFetchOptions = typeof globalOptions.fetchOptions === "function" ? globalOptions.fetchOptions(astroContext) : globalOptions.fetchOptions;
+		return new Promise((resolve, reject) => {
+			client.request(query, {
+				...defaultVariables,
+				...variables
+			}, {
+				...defaultFetchOptions,
+				...fetchOptions,
+				headers: {
+					...defaultFetchOptions?.headers,
+					...fetchOptions?.headers
+				}
+			}).then((data) => resolve(data)).catch((error) => {
+				if (error instanceof GraphQLRequestError$1) {
+					const code = (error.fieldErrors?.[0])?.code;
+					const errorProps = {
+						code,
+						message: error.message,
+						query: error.query,
+						variables: error.variables,
+						extensions: error.extensions,
+						fieldErrors: error.fieldErrors
+					};
+					if (code === 404) reject(new GraphQLNotFoundError(errorProps));
+					else if (code === 422) reject(new GraphQLValidationError(errorProps));
+					reject(new GraphQLRequestError(errorProps));
+				} else reject(error);
+			});
+		});
+	};
+}
+
+//#endregion
+export { GraphQLNotFoundError, GraphQLRequestError, GraphQLValidationError, createGraphQLAPI, gql, handleErrorResponse };

package/dist/company-setting/index.d.ts

@@ -0,0 +1,6 @@
+import * as graphql0 from "graphql";
+
+//#region src/company-setting/fragments.d.ts
+declare const companySettingFields: graphql0.DocumentNode;
+//#endregion
+export { companySettingFields };

package/dist/company-setting/index.js

@@ -0,0 +1,25 @@
+import { gql } from "graphql-tag";
+
+//#region src/company-setting/fragments.ts
+const companySettingFields = gql`
+  fragment CompanySettingFields on CompanySetting {
+    lang
+    name
+    description
+    logo
+    address_1
+    address_2
+    email_1
+    email_2
+    fb_link
+    ig_link
+    line_link
+    phone_1
+    phone_2
+    twitter_link
+    threads_link
+  }
+`;
+
+//#endregion
+export { companySettingFields };

package/dist/image/components/Image.astro

@@ -0,0 +1,10 @@
+---
+interface Props extends astroHTML.JSX.ImgHTMLAttributes {
+  src: string | null
+  srcBlur?: string | null
+}
+
+const { src, ...attributes } = Astro.props
+---
+
+{src && <img src={src} {...attributes} />}

package/dist/image/components/ResponsiveImage.astro

@@ -0,0 +1,41 @@
+---
+interface Props extends astroHTML.JSX.ImgHTMLAttributes {
+  desktop: string | null
+  desktopBlur?: string | null
+  mobile?: string | null
+  mobileBlur?: string | null
+
+  // GraphQL image props
+  desktop_blur?: string | null
+  mobile_blur?: string | null
+}
+
+const {
+  desktop,
+  desktopBlur: _desktopBlur,
+  mobile,
+  mobileBlur: _mobileBlur,
+
+  desktop_blur: _desktop_blur,
+  mobile_blur: _mobile_blur,
+  src: _src,
+
+  ...attributes
+} = Astro.props
+
+// const desktopBlur = Astro.props.desktopBlur || Astro.props.desktop_blur
+// const mobileBlur = Astro.props.mobileBlur || Astro.props.mobile_blur
+
+const breakpoint = 768
+---
+
+{desktop && (
+  mobile ? (
+    <picture>
+      {mobile && <source media={`(max-width: ${breakpoint - 0.02}px)`} srcset={mobile} />}
+      <img src={desktop} {...attributes} />
+    </picture>
+  ) : (
+    <img src={desktop} {...attributes} />
+  )
+)}

package/dist/image/index.d.ts

@@ -0,0 +1,16 @@
+import * as graphql0 from "graphql";
+
+//#region src/image/fragments.d.ts
+declare const imageFields: graphql0.DocumentNode;
+declare const coverFields: graphql0.DocumentNode;
+declare const backgroundFields: graphql0.DocumentNode;
+//#endregion
+//#region src/image/types.d.ts
+interface ImageSource {
+  desktop: string | null;
+  desktop_blur: string | null;
+  mobile: string | null;
+  mobile_blur: string | null;
+}
+//#endregion
+export { ImageSource, backgroundFields, coverFields, imageFields };

package/dist/image/index.js

@@ -0,0 +1,30 @@
+import { gql } from "graphql-tag";
+
+//#region src/image/fragments.ts
+const imageFields = gql`
+  fragment ImageFields on Image {
+    desktop
+    desktop_blur
+    mobile
+    mobile_blur
+  }
+`;
+const coverFields = gql`
+  fragment CoverFields on Cover {
+    desktop
+    desktop_blur
+    mobile
+    mobile_blur
+  }
+`;
+const backgroundFields = gql`
+  fragment BackgroundFields on Background {
+    desktop
+    desktop_blur
+    mobile
+    mobile_blur
+  }
+`;
+
+//#endregion
+export { backgroundFields, coverFields, imageFields };

package/dist/page/components/PageFieldRender.astro

@@ -0,0 +1,34 @@
+---
+import type { PageField } from '@stephenchenorg/astro-graphql/page'
+import ResponsiveImage from '@stephenchenorg/astro-graphql/image/components/ResponsiveImage.astro'
+import { isContentField, isImageField, isPlainTextareaField, isPlainTextField } from '@stephenchenorg/astro-graphql/page'
+
+interface Props {
+  fields: PageField[]
+  key: string
+  attributes?: Record<string, any>
+}
+
+const { fields, key, attributes } = Astro.props
+
+const field = fields.find(field => field.key === key)
+---
+
+{
+  field && (
+    isPlainTextField(field) ? <Fragment set:text={field.content} />
+    : isPlainTextareaField(field) ? <Fragment set:html={field.content} />
+    : isContentField(field) ? <Fragment set:html={field.content} />
+    : isImageField(field) ? (
+      <ResponsiveImage
+        desktop={field.image.desktop}
+        desktopBlur={field.image.desktop_blur}
+        mobile={field.image.mobile}
+        mobileBlur={field.image.mobile_blur}
+        alt={`Image of ${key}`}
+        {...attributes}
+      />
+    )
+    : null
+  )
+}

package/dist/page/index.d.ts

@@ -0,0 +1,81 @@
+import * as graphql4 from "graphql";
+import { PageMeta } from "@stephenchenorg/astro/page";
+
+//#region src/page/field/fragments.d.ts
+/**
+ * Page fields fragment requires explicit import image
+ * fields fragment `imageFields` from Image module.
+ */
+declare const pageFields: graphql4.DocumentNode;
+//#endregion
+//#region src/page/types.d.ts
+interface DataPage {
+  page: Page;
+}
+interface Page extends PageMeta {
+  fields: PageField[];
+}
+interface PageField {
+  key: string;
+  type: 'text' | 'textarea' | 'html' | 'image';
+  content: string | null;
+  image: {
+    desktop: string | null;
+    desktop_blur: string | null;
+    mobile: string | null;
+    mobile_blur: string | null;
+  };
+}
+interface PagePlainTextField extends PageField {
+  type: 'text';
+  content: string;
+  image: {
+    desktop: null;
+    desktop_blur: null;
+    mobile: null;
+    mobile_blur: null;
+  };
+}
+interface PagePlainTextareaField extends PageField {
+  type: 'textarea';
+  content: string;
+  image: {
+    desktop: null;
+    desktop_blur: null;
+    mobile: null;
+    mobile_blur: null;
+  };
+}
+interface PageContentField extends PageField {
+  type: 'html';
+  content: string;
+  image: {
+    desktop: null;
+    desktop_blur: null;
+    mobile: null;
+    mobile_blur: null;
+  };
+}
+interface PageImageField extends PageField {
+  type: 'image';
+  content: null;
+  image: {
+    desktop: string;
+    desktop_blur: string;
+    mobile: string;
+    mobile_blur: string;
+  };
+}
+//#endregion
+//#region src/page/field/helpers.d.ts
+declare function isPlainTextField(field: PageField): field is PagePlainTextField;
+declare function isPlainTextareaField(field: PageField): field is PagePlainTextareaField;
+declare function isContentField(field: PageField): field is PageContentField;
+declare function isImageField(field: PageField): field is PageImageField;
+declare function pageTextField(fields: PageField[], key: string): string | null;
+declare function pageImageFieldForBackground(fields: PageField[], key: string): string;
+//#endregion
+//#region src/page/seo-meta/fragments.d.ts
+declare const seoMetaFields: (dummyClass: string) => graphql4.DocumentNode;
+//#endregion
+export { DataPage, Page, PageContentField, PageField, PageImageField, PagePlainTextField, PagePlainTextareaField, isContentField, isImageField, isPlainTextField, isPlainTextareaField, pageFields, pageImageFieldForBackground, pageTextField, seoMetaFields };

package/dist/page/index.js

@@ -0,0 +1,71 @@
+import { gql } from "graphql-tag";
+
+//#region src/page/field/fragments.ts
+/**
+* Page fields fragment requires explicit import image
+* fields fragment `imageFields` from Image module.
+*/
+const pageFields = gql`
+  fragment PageFields on Page {
+    title
+    seo_title
+    seo_description
+    seo_keyword
+    seo_json_ld
+    seo_head
+    seo_body
+    og_title
+    og_description
+    og_image
+    fields {
+      key
+      content
+      type
+      image {
+        ...ImageFields
+      }
+    }
+  }
+`;
+
+//#endregion
+//#region src/page/field/helpers.ts
+function isPlainTextField(field) {
+	return field.type === "text";
+}
+function isPlainTextareaField(field) {
+	return field.type === "textarea";
+}
+function isContentField(field) {
+	return field.type === "html";
+}
+function isImageField(field) {
+	return field.type === "image";
+}
+function pageTextField(fields, key) {
+	const field = fields.find((field$1) => field$1.key === key && isPlainTextField(field$1));
+	return field ? field.content : "";
+}
+function pageImageFieldForBackground(fields, key) {
+	const field = fields.find((field$1) => field$1.key === key && isImageField(field$1));
+	return field ? `background-image: url('${field.image.desktop}');` : "";
+}
+
+//#endregion
+//#region src/page/seo-meta/fragments.ts
+const seoMetaFields = (dummyClass) => gql(`
+  fragment DummyClassSeoMetaFields on DummyClass {
+    seo_title
+    seo_description
+    seo_keyword
+    seo_json_ld
+    seo_head
+    seo_body
+    og_title
+    og_description
+    og_image
+  }
+`.replace(/DummyClass/g, dummyClass));
+
+//#endregion
+export { isContentField, isImageField, isPlainTextField, isPlainTextareaField, pageFields, pageImageFieldForBackground, pageTextField, seoMetaFields };

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@stephenchenorg/astro-graphql",
+  "type": "module",
+  "version": "9.0.0",
+  "description": "Stephenchenorg Astro 前端 GraphQL 整合串接套件",
+  "license": "MIT",
+  "homepage": "https://stephenchenorg-astro.netlify.app",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stephenchenorg/package.astro.git",
+    "directory": "packages/graphql"
+  },
+  "keywords": [
+    "astro",
+    "graphql",
+    "api"
+  ],
+  "exports": {
+    "./api": {
+      "types": "./dist/api/index.d.ts",
+      "import": "./dist/api/index.js"
+    },
+    "./company-setting": {
+      "types": "./dist/company-setting/index.d.ts",
+      "import": "./dist/company-setting/index.js"
+    },
+    "./image": {
+      "types": "./dist/image/index.d.ts",
+      "import": "./dist/image/index.js"
+    },
+    "./image/components/Image.astro": "./dist/image/components/Image.astro",
+    "./image/components/ResponsiveImage.astro": "./dist/image/components/ResponsiveImage.astro",
+    "./page": {
+      "types": "./dist/page/index.d.ts",
+      "import": "./dist/page/index.js"
+    },
+    "./page/components/PageFieldRender.astro": "./dist/page/components/PageFieldRender.astro"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "code-check": "astro check",
+    "prepack": "npm run build"
+  },
+  "peerDependencies": {
+    "@stephenchenorg/astro": "^9.0.0",
+    "astro": "^5.0.0"
+  },
+  "dependencies": {
+    "@graphql-typed-document-node/core": "^3.2.0",
+    "awesome-graphql-client": "^2.1.0",
+    "graphql": "^16.12.0",
+    "graphql-tag": "^2.12.6"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.9.6",
+    "astro": "^5.16.4",
+    "tsdown": "^0.18.1",
+    "typescript": "^5.9.3"
+  }
+}