refactor: graphql fetching with template hierarchy and implement in astro example

Author: moonmeister

examples/astro/template-hierarchy/astro.config.mjs

@@ -9,5 +9,23 @@ export default defineConfig({
 				'@': '/src',
 			},
 		},
+		server: {
+			watch: {
+				// Explicitly watch the packages directories
+				ignored: [
+					'**/node_modules/**',
+					'!**/node_modules/@faustjs/**', // Watch @faustjs packages
+				],
+				followSymlinks: true,
+			},
+		},
+		optimizeDeps: {
+			// Don't pre-bundle workspace packages so changes are picked up immediately
+			exclude: [
+				'@faustjs/astro',
+				'@faustjs/template-hierarchy',
+				'@faustjs/graphql',
+			],
+		},
 	},
 });

examples/astro/template-hierarchy/src/pages/[...uri].astro

@@ -1,5 +1,13 @@
 ---
-import { uriToTemplate } from '@faustjs/astro';
+import {
+	uriToTemplate,
+	createDefaultClient,
+	setGraphQLClient,
+} from '@faustjs/astro';
+
+// Set up GraphQL client using environment variable
+const client = createDefaultClient(import.meta.env.WORDPRESS_URL);
+setGraphQLClient(client);
 
 // URI comes as a string from Astro params, ensure it starts with /
 const { uri = '/' } = Astro.params;

examples/nextjs/template-hierarchy/package.json

@@ -0,0 +1,23 @@
+{
+	"name": "@faustjs/nextjs-template-hierarchy-example",
+	"version": "1.0.0",
+	"private": true,
+	"description": "Example Next.js app using @faustjs/nextjs template hierarchy",
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"start": "next start",
+		"lint": "next lint"
+	},
+	"dependencies": {
+		"@faustjs/nextjs": "workspace:*",
+		"@faustjs/template-hierarchy": "workspace:*",
+		"next": "^14.0.0",
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
+	},
+	"devDependencies": {
+		"eslint": "^8.0.0",
+		"eslint-config-next": "^14.0.0"
+	}
+}

packages/astro/config.js

@@ -8,19 +8,9 @@ export { uriToTemplate } from './templateHierarchy.js';
 // Export template collection
 export { createTemplateCollection, templateSchema } from './templateLoader.js';
 
-// Export configuration utilities
+// Export GraphQL configuration utilities
 export {
 	setGraphQLClient,
-	getConfiguredClient,
-	createDefaultClient,
-} from './config.js';
-
-// TODO: Implement Astro integration
-export function faustjs(options = {}) {
-	return {
-		name: '@faustjs/astro',
-		hooks: {
-			// TODO: Add Astro integration hooks
-		},
-	};
-}
+	getGraphQLClient,
+	createDefaultGraphQLClient as createDefaultClient,
+} from '@faustjs/graphql';

packages/astro/index.js

@@ -22,7 +22,9 @@
 		"node": ">=24"
 	},
 	"dependencies": {
-		"@faustjs/template-hierarchy": "workspace:*"
+		"@faustjs/template-hierarchy": "workspace:*",
+		"@faustjs/graphql": "workspace:*",
+		"graphql": "^16.8.1"
 	},
 	"peerDependencies": {
 		"astro": "^5.0.0",

packages/astro/package.json

@@ -3,8 +3,17 @@
  */
 
 import { getCollection, getEntry } from 'astro:content';
-import { getTemplate, getPossibleTemplates } from '@faustjs/template-hierarchy';
-import { getSeedQuery } from './seedQuery.js';
+import {
+	getTemplate,
+	getPossibleTemplates,
+	getSeedQuery,
+} from '@faustjs/template-hierarchy';
+import { getGraphQLClient } from '@faustjs/graphql';
+
+console.log(
+	'🚀 Astro templateHierarchy.js loaded at:',
+	new Date().toISOString(),
+);
 
 /**
  * Resolve a URI to template data using WordPress template hierarchy
@@ -21,7 +30,9 @@ export async function uriToTemplate({ uri, graphqlClient }) {
 		template: undefined,
 	};
 
-	const { data, error } = await getSeedQuery({ uri, graphqlClient });
+	// Get the GraphQL client - use provided one or get configured one
+	const client = getGraphQLClient(graphqlClient);
+	const { data, error } = await getSeedQuery({ uri, graphqlClient: client });
 
 	returnData.seedQuery = { data, error };
 
@@ -60,9 +71,12 @@ export async function uriToTemplate({ uri, graphqlClient }) {
 		availableTemplates.map((template) => template.data.id),
 		possibleTemplates,
 	);
-	returnData.template = await getEntry('templates', templateId)?.data;
 
-	if (!returnData.template) {
+	const template = await getEntry('templates', templateId);
+
+	returnData.template = template.data;
+
+	if (!template) {
 		console.error('No template found for route');
 	}
 

packages/astro/seedQuery.js

@@ -8,11 +8,4 @@
  * @property {(query: string, variables?: Record<string, any>) => Promise<{data?: any, error?: any}>} request - Execute a GraphQL query
  */
 
-/**
- * Options for getSeedQuery function
- * @typedef {Object} SeedQueryOptions
- * @property {string} uri - The URI to query for
- * @property {GraphQLClient} [graphqlClient] - Optional GraphQL client to use
- */
-
 export {};

packages/astro/templateHierarchy.js

@@ -0,0 +1,77 @@
+# @faustjs/graphql
+
+Shared GraphQL utilities for FaustJS packages.
+
+## Features
+
+- Default GraphQL client using fetch
+- Global client configuration with fallback priority
+- WordPress URL utilities
+- Framework-agnostic GraphQL endpoint handling
+
+## Installation
+
+```bash
+npm install @faustjs/graphql
+# or
+pnpm add @faustjs/graphql
+# or
+yarn add @faustjs/graphql
+```
+
+## Usage
+
+### Basic Usage
+
+```js
+import {
+	setGraphQLClient,
+	getGraphQLClient,
+	createDefaultClient,
+} from '@faustjs/graphql';
+
+// Create and set up client explicitly
+const client = createDefaultClient('https://my-wordpress-site.com');
+setGraphQLClient(client);
+
+// Later, get the configured client
+const configuredClient = getGraphQLClient();
+
+// Use client for your own queries
+const result = await configuredClient.request(yourQuery, variables);
+```
+
+### Client Priority System
+
+The GraphQL client uses a simple priority system:
+
+1. **Provided Client**: Client passed directly to functions
+2. **Configured Client**: Client set globally with `setGraphQLClient()`
+3. **Error**: No automatic fallback - explicit setup required
+
+This explicit approach ensures you know exactly which client is being used.
+
+### Environment Variables
+
+The package supports these environment variables:
+
+- `WORDPRESS_URL` - Your WordPress site URL
+- Framework-specific variants (e.g., `NEXT_PUBLIC_WORDPRESS_URL`)
+
+## API Reference
+
+### `setGraphQLClient(client)`
+
+Set a global GraphQL client.
+
+### `createDefaultGraphQLClient(wordpressUrl)`
+
+Create a default fetch-based GraphQL client. Requires explicit WordPress URL.
+
+### `getGraphQLClient(providedClient)`
+
+Get a GraphQL client using the priority system. Throws error if no client is available.
+
+## License
+
+MIT